React onPasteCapture es un controlador de eventos que se activa cada vez que pegamos texto en un campo de entrada. como onpaste, pero la diferencia es que onPasteCapture actúa en la fase de captura mientras que onPaste actúa en la fase burbujeante , es decir, las fases de un evento.
Requisito previo:
- Introducción e instalación de ReactJS
- Fases del evento de JavaScript
Sintaxis:
<input onPasteCapture={function}/>
Creando la aplicación React:
Paso 1: cree una carpeta de proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name. Si ya ha instalado create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella con el siguiente comando.
cd project
Estructura del proyecto: Se verá así:
Ejemplo: en este ejemplo, estamos creando un campo de entrada que tiene el valor predeterminado «¡Pegar aquí!» y un texto dentro de la etiqueta <p> «Copiar esta línea».
Cuando lo copiamos y pegamos en nuestro campo de entrada, el evento onPasteCapture llamará a onPasteCaptureHandler, una función que mostrará el texto “Pegar con éxito” en la consola.
App.js
function App() {
const onPasteCaptureHandler = () => {
console.log("Pasted Successfully!");
};
return (
<div className="App">
<h1> Hey Geek!</h1>
<p>Copy this line</p>
<input
defaultValue="Paste here!"
onPasteCapture={onPasteCaptureHandler}
></input>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
