React onCopyCapture es un controlador de eventos que se activa cada vez que copiamos el texto en la página web. como onCopy, pero la diferencia es que onCopyCapture actúa en la fase de captura mientras que onBlur 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:
<element onCopyCapture={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. Suponga que 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 colocando un texto dentro de una etiqueta <p> que es «Copiar este texto». Después de que el elemento se representa cada vez que copiamos el texto, el evento onCopyCapture llama a onCopyCaptureHandler una función que mostrará un texto «copiado».
App.js
function App() {
const onCopyCaptureHandler = () => {
console.log("copied");
};
return (
<div className="App">
<h1> Hey Geek!</h1>
<p onCopyCapture={onCopyCaptureHandler}>
Copy this text!
</p>
</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:
