What is onBeforeInputCapture Event in ReactJS ?

React onBeforeInputCapture is an event handler that gets triggered when we make any modifications to the input file, like onBeforeInput, but the difference is that onBeforeInputCapture acts in the capture phase whereas onBeforeInput acts in the bubbling phase i,e. phases of an event.

Prerequisite:

• Introduction and installation ReactJS
• Phases of JavaScript Event

Syntax:

<input  onBeforeInputCapture={function}/>

Creating React Application:

Step 1: Create a react project folder, for that open the terminal, and write the command npm create-react-app folder name. If you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Project Structure: It will look like this:

Example: In this example, we are creating an input field with the label “Enter your name:”, and we are adding a default value as “default” to it. The onBeforeInputCapture event will call onBeforeInputCaptureHandler, a function that will show a text “onBeforeInputCapture” whenever any new value is added to the input field.

App.js

Javascript

function App() {
    const onBeforeInputCaptureHandler = () => {
        console.log("onBeforeInputCapture");
    }
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Enter your name:</label>
            <input type="text"
                defaultValue="default"
                onBeforeInputCapture={onBeforeInputCaptureHandler}
            />
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

My Personal Notes arrow_drop_up

Save