Events in React OTP Input component

13 Jun 202412 minutes to read

This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component.

created

The OTP Input component triggers the created event when the component rendering is completed.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const createdFunction = () => {
        //your required action here
    }
    return (<div id='container'>
            <OtpInputComponent id='otpinput' created={createdFunction}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const createdFunction = () => {
        //your required action here
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' created={createdFunction}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

focus

The OTP Input component triggers the focus event when the OTP Input is focused. The OtpFocusEventArgs passed as an event argument provides the details of the focus event.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const focusFunction = (args) => {
        //your required action here
    }
    return (<div id='container'>
            <OtpInputComponent id='otpinput' focus={focusFunction}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent, OtpFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const focusFunction = (args: OtpFocusEventArgs) => {
        //your required action here
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' focus={focusFunction}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

blur

The OTP Input component triggers the blur event when the OTP input is focused out. The OtpFocusEventArgs passed as an event argument provides the details of the blur event.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const blurFunction = (args) => {
        //your required action here
    }
    return (<div id='container'>
            <OtpInputComponent id='otpinput' blur={blurFunction}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent, OtpFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const blurFunction = (args: OtpFocusEventArgs) => {
        //your required action here
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' blur={blurFunction}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

input

The OTP Input component triggers the input event when the value of each OTP Input is changed. The OtpInputEventArgs passed as an event argument provides the details of the each value is changed.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const inputFunction = (args) => {
        //your required action here
    }
    return (<div id='container'>
            <OtpInputComponent id='otpinput' input={inputFunction}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent, OtpInputEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const inputFunction = (args: OtpInputEventArgs) => {
        //your required action here
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' input={inputFunction}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

valueChanged

The OTP Input control triggers the valueChanged event when the value of the OTP Input is changed and matching the OTP Input length. The OtpChangedEventArgs passed as an event argument provides the details when value is changed.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const valueChangeFuntion = (args) => {
        //your required action here
    }
    return (<div id='container'>
            <OtpInputComponent id='otpinput' valueChanged={valueChangeFuntion}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const valueChangeFuntion = (args: OtpChangedEventArgs) => {
        //your required action here
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' valueChanged={valueChangeFuntion}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Below example demonstrates the valueChanged event of the OTP Input control.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    const valueChangeFuntion = (args) => {
        alert("Entered OTP value: " + args.value);
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' valueChanged={valueChangeFuntion}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent, OtpChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
    const valueChangeFuntion = (args: OtpChangedEventArgs) => {
        alert("Entered OTP value: " + args.value);
    }
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' valueChanged={valueChangeFuntion}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));