Un evento antirrebote en ReactJS le permitirá llamar a una función que garantiza que una tarea que consume mucho tiempo no se active con tanta frecuencia. Es una función que toma una función como parámetro y envuelve esa función en un cierre y la devuelve para que esta nueva función muestre el comportamiento de «esperar un poco».
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app react-debouncing
Paso 2: después de crear la carpeta de su proyecto, es decir, reaccionar contra el rebote , muévase a ella con el siguiente comando:
cd react-debouncing
Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:
npm install lodash
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React, { Component } from "react"; import { debounce } from "lodash"; class WidgetText extends Component { state = { text: "" }; handleChange = (e) => { this.setState({ text: e.target.value }); }; render() { return ( <div> <input onChange={this.handleChange} /> <textarea value={this.state.text} /> </div> ); } } class App extends Component { state = { show: true }; handleToggle = debounce(() => { this.setState(prevState => ({ show: !prevState.show })); }, 500); render() { return ( <div> <button onClick={this.handleToggle}>Toggle</button> {this.state.show ? <WidgetText /> : null} </div> ); } } export default App;
Explicación:
- Tenga una página simple con un botón de alternar, si hacemos clic en él, los campos de entrada desaparecen y hacemos clic nuevamente para recuperar el campo de entrada y si escribimos en el cuadro de entrada, el texto se reflejará inmediatamente en el área de texto a continuación.
- Tenemos un componente React WidgetText, y esencialmente solo tiene el área de entrada y texto y luego el componente de la aplicación en sí tiene el botón de alternar.
- Condicionalmente, si hacemos clic en el botón de alternar, entrará en la captura del controlador, el estado anterior lo mira y muestra bool fuera del estado y lo voltea, por lo que si era cierto, representará el WidgetText si es falso, lo hacemos. no representar el WidgetText.
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por harshitpandey251 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA