What is onCutCapture Event in ReactJS ?

0 0 1 minute read

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!