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.
React onChangeCapture is an event handler that gets triggered whenever we change the input field. like onChange, the difference is that onChangeCapture acts in the capture phase whereas onChange acts in the bubbling phase i,e. phases of an event.
Prerequisite:
- Introduction and installation of ReactJS
- Phases of JavaScript Event
Syntax:
<input onChangeCapture={function}/>
Creating the 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 “Please Enter your name:”, setting the input type as text. Whenever we will make any change in the input field the onChangeCapture event will call onChangeCaptureHandler, a function that takes event e as props, e.target.value will show the current change made in the console.
App.js
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:
