What is onBeforeInputCapture Event in ReactJS ?

onBeforeInputCapture Event in ReactJS 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:

• NPM & Node.js
• ReactJS
• Phases of JavaScript Event
• event bubbling and capturing

Approach:

To show the use of onBeforeInputCapture Event in React JS we we are creating an input field with the label “Enter your name:”, and we are adding a default value “default” to it. The onBeforeInputCapture event will call onBeforeInputCaptureHandler, a function that will show the text “onBeforeInputCapture” whenever any new value is added to the input field.

Syntax:

<input  onBeforeInputCapture={function}/>

Steps to Create React Application:

Step 1: Initialize a React Project using this command in the terminal.

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:

Example: This example demonstrate the use of onBeforeInputCapture for an input field with ‘default’ as a predefined value.

Javascript

// Filename - App.js

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: This output will be visible on the http://localhost:3000 on the browser window.