Estado y eventos
El estado y los eventos son fundamentales en React para crear aplicaciones interactivas. El estado nos permite almacenar y actualizar datos dentro de un componente, mientras que los eventos nos permiten capturar las acciones del usuario, como clics o escritura en campos de texto.
1. Uso del estado con useState #
El estado en un componente de función se maneja con el Hook useState, que nos permite definir una variable de estado y una función para actualizarla.
Ejemplo básico de uso de useState:
En este ejemplo:
useState(0)crea una variable de estadocontadorinicializada en 0.setContadores la función que actualiza el estado.- Cada vez que se hace clic en el botón,
setContador(contador + 1)incrementa el valor del contador en 1.
2. Manejo de eventos en React #
Los eventos en React son similares a los de JavaScript, pero se escriben en formato camelCase. Algunos eventos comunes incluyen onClick, onChange, onSubmit, entre otros.
Ejemplo de evento onClick:
Ejemplo de evento onChange en un input:
Aquí, el evento onChange actualiza el estado texto cada vez que el usuario escribe algo en el input.
3. Lifting State Up (elevación de estado) #
A veces, varios componentes necesitan compartir un mismo estado. En este caso, podemos elevar el estado al componente padre para que todos los componentes hijos tengan acceso a él. Esto se conoce como lifting state up.
Ejemplo de lifting state up:
En este ejemplo:
Padretiene el estadomensajey la funciónsetMensajepara actualizarlo.Hijo1recibesetMensajecomo prop y lo usa para enviar un mensaje al hacer clic en el botón.Hijo2muestra el mensaje actualizado dePadre.
4. Ejercicio práctico: Contador de clics #
Creemos una aplicación simple que cuenta los clics que hace el usuario.
En este ejercicio:
clicses una variable de estado que almacena el número de clics.incrementarClicses una función que aumenta el contador en 1 cada vez que se hace clic en el botón "Incrementar".reiniciarContadorrestablece el contador a 0 cuando se hace clic en el botón "Reiniciar".
Resumen del tema
Conceptos clave #
- Manejo de Estado con
useState:const [estado, setEstado] = useState(valorInicial). Provoca un re-renderizado reactivo ante cambios. - Manejo de Eventos Sintéticos: sintaxis camelCase (
onClick,onChange,onSubmit) pasando funciones callback como handlers. - Inputs Controlados: vinculación bidireccional entre el valor del input (
value={texto}) y el estado medianteonChange={(e) => setTexto(e.target.value)}. - Elevación del Estado (Lifting State Up): mover el estado al ancestro común más cercano para sincronizar y compartir datos entre componentes hermanos.
Qué debes recordar #
Usa useState para estado local y eleva el estado (lifting state up) al componente padre cuando múltiples hijos deban compartir y sincronizar datos.