React onCutCapture is an event handler that gets triggered whenever we cut a text. like oncut, but the difference is that onCutCapture acts in the capture phase whereas onCut acts in the bubbling phase i.e. phases of an event.
Prerequisite:
- Introduction and installation of ReactJS
- Phases of JavaScript Event
Syntax:
<input onCutCapture={function}/>
Creating 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 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 default value “Cut the text”. When we cut (Ctrl+X) a particular text in the input field the onCutCapture event will call onCutCaptureHandler, a function that will show the text “Cut the text” in the console.
App.js
function App() { const onCutCaptureHandler = () => { console.log("Cut the text"); }; return ( <div className="App"> <h1> Hey Geek!</h1> <input defaultValue="Cut the text" onCutCapture={onCutCaptureHandler} ></input> </div> ); } export default App; |
Step to Run the Application: Run the application using the following command from the project’s root directory.
npm start
Output:
