Formularios controlados: el estado manda

Los formularios son el caso más común de interacción en una app. En React se manejan con un patrón preciso: el input CONTROLADO, donde el estado es la única fuente de verdad de lo que el usuario escribe. El valor del input viene del estado, y cada tecla lo actualiza. Suena circular, pero es lo que te da control total —validar, formatear, deshabilitar—.

El input como espejo del estado

El patrón: value + onChange

Un input controlado tiene dos props que lo atan al estado: value (lo que muestra, desde el estado) y onChange (que actualiza el estado en cada tecla):

El ciclo es: el usuario teclea → onChange dispara → setNombre(e.target.value) actualiza el estado → React re-renderiza → el input muestra el nuevo value. El e.target.value es el texto actual del input (tu conocimiento de eventos del SC-02, ahora tipado por React). Como el valor vive en el estado, puedes usarlo en el acto —contar letras, saludar— sin leer el DOM.

Por qué controlado: el control total

Varios campos y el envío

Un formulario real tiene varios campos y un envío. Cada campo es un estado (o un objeto de estado), y el onSubmit del <form> maneja el envío con preventDefault:

Fíjate en el poder del estado: el botón "Agregar" se deshabilita (disabled={!nombre || !valor}) mientras falten campos, porque los valores viven en el estado y puedes leerlos al renderizar. El onSubmit en el <form> con preventDefault() (tu conocimiento del SC-02) es la forma correcta de enviar —captura el Enter y el clic del botón—. Tras enviar, vacías los campos con setX("").

Mini-reto

Construye un mini-formulario: 1) un input controlado para un email y un <p> que muestre si es válido (contiene "@") en vivo; 2) transforma el input de un codigo a MAYÚSCULAS al escribir (en el onChange, setCodigo(e.target.value.toUpperCase())); 3) un botón "Limpiar" que vacíe ambos con setX(""). Siente el control total que da tener el valor en el estado.

Qué sigue

Ya manejas texto en el estado. Pero el estado real de una app son OBJETOS y ARRAYS —una lista de gastos, un formulario con muchos campos—, y actualizarlos tiene una regla de oro que ya conoces del SC-02: la inmutabilidad. La próxima lección enseña cómo actualizar estado complejo sin mutarlo, el detalle que hace que React "vea" tus cambios.