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:
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.jsfunction 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.
