Inputs controlados y formularios

¿Quién controla el input?

En HTML normal, el navegador controla el valor del input. Tú escribes, el DOM se actualiza, y si quieres leer el valor, le preguntas al DOM con document.querySelector. Eso es un input no controlado.

En React, le damos la vuelta: React controla el valor del input a través del estado. Esto es un input controlado.

El circuito cerrado

Un input controlado funciona con un ciclo de tres pasos:

En código:

1. value={nombre} → React decide qué muestra el input
2. El usuario escribe una letra
3. onChange se dispara con el nuevo valor
4. setNombre actualiza el estado
5. React re-renderiza con el nuevo valor
6. El input muestra el valor actualizado

¿Para qué tanto lío?

Al controlar el input, ganas superpoderes:

Validación en tiempo real

Transformar el input

Deshabilitar botón si el formulario no es válido

Formularios con múltiples campos

Para formularios con varios campos, tienes dos opciones:

Opción 1: un estado por campo

Simple y directo. Ideal para formularios pequeños.

Opción 2: un objeto de estado

Más escalable para formularios grandes. [e.target.name] es una propiedad computada — usa el atributo name del input como clave del objeto.

Manejo del submit

e.preventDefault() es crucial: sin él, el formulario recarga la página (comportamiento nativo de HTML). En una SPA con React, no queremos eso.

Tu desafío 🚀

Crea un formulario de registro con:

1. Tres campos controlados: nombre, email, password (cada uno con su value y onChange)
2. Un onSubmit en el <form> que llame a e.preventDefault() y muestre los datos con alert
3. El botón de enviar

Prueba a escribir en los campos y enviar el formulario.

Los formularios controlados te dan control total sobre los datos del usuario. Es más código que el HTML puro, pero a cambio tienes validación, transformación y control absoluto sobre cada campo.