What is onChangeCapture Event in ReactJS ?
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; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Output
