React onBlurCapture es un controlador de eventos que se activa cada vez que se elimina el foco del campo de entrada. como onBlur, pero la diferencia es que onBlurCapture 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:
<input onBlurCapture={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 onBlurCapture llamará a onBlurCaptureHandler, una función que mostrará un texto «se movió fuera del cuadro de texto, onBlurCapture se activa» siempre que hagamos clic fuera del campo de entrada en la consola.
Aplicación.js
Javascript
function App() {
const onBlurCaptureHandler = () => {
console.log("you moved outside the"
+ " text box, onBlurCapture is triggered");
};
return (
<div className="App">
<h1> Hey Geek!</h1>
<label>Enter your name:</label>
<input
type="text"
defaultValue="default"
onBlurCapture={onBlurCaptureHandler}
/>
</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:
