What is onChangeCapture Event in ReactJS ?

Last Updated : 28 Nov, 2023

ReactJS, a popular JavaScript library for building user interfaces, provides a wide range of events that developers can utilize to create interactive and dynamic applications. One such event is the onChangeCapture event, which is specifically designed for handling changes to form inputs and capturing events in the capturing phase of the event propagation.

Prerequisites:

Syntax:

<input onChangeCapture={function}/>

Steps to Create the React Application And Installing Module:

Step 1: Create a react project folder

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:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This example features an input field with the label “Please Enter your name:” and type text, utilizing the onChangeCapture event to trigger the onChangeCaptureHandler function, which logs the current input change to the console.

Javascript

function App() {
    const onChangeCaptureHandler = (e) => {
        console.log(e.target.value);
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Please Enter your name:</label>
            <input type="text"
                onChangeCapture={onChangeCaptureHandler} />
        </div>
    );
}
 
export default App;