React onBeforeInputCapture es un controlador de eventos que se activa cuando hacemos modificaciones en el archivo de entrada, como onBeforeInput, pero la diferencia es que onBeforeInputCapture actúa en la fase de captura mientras que onBeforeInput actúa en la fase burbujeante , es decir. Fases de un evento.
Requisito previo:
- Introducción e instalación ReactJS
- Fases del evento de JavaScript
Sintaxis:
<input onBeforeInputCapture={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 puede instalarlo 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 usando el siguiente comando.
cd project
Estructura del proyecto: Se verá así:
Ejemplo: en este ejemplo, estamos creando un campo de entrada con la etiqueta «Ingrese su nombre:», y le estamos agregando un valor predeterminado como «predeterminado». El evento onBeforeInputCapture llamará a onBeforeInputCaptureHandler, una función que mostrará un texto «onBeforeInputCapture» cada vez que se agregue un valor nuevo al campo de entrada.
Aplicación.js
Javascript
function 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;
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:
