Formularios controlados en React: fuente única de verdad

Domina inputs controlados para construir formularios predecibles, validables y fáciles de mantener en aplicaciones reales.

Un formulario controlado significa que el valor visual de cada input vive en el estado de React, no en el DOM como fuente principal.

Este enfoque aporta trazabilidad: sabes en todo momento qué dato hay en cada campo y en qué momento cambió.

La contrapartida es que debes modelar bien el estado para no crear handlers caóticos al crecer el formulario.

En equipos, los formularios controlados facilitan validación, testing y reutilización de componentes de campo.

  • Debe recibir su valor desde estado y notificar cambios vía `onChange`.
  • Si usas `value={estado}` pero no actualizas en `onChange`, el input queda bloqueado.
  • Si usas `defaultValue`, el input arranca con un valor pero deja de estar bajo control total de React.
  • Para flujos robustos de negocio, lo habitual es usar inputs controlados salvo casos concretos.
  • En formularios medianos conviene centralizar campos en un único objeto de estado.

Qué convierte un input en controlado

Debe recibir su valor desde estado y notificar cambios vía `onChange`.

Si usas `value={estado}` pero no actualizas en `onChange`, el input queda bloqueado.

Si usas `defaultValue`, el input arranca con un valor pero deja de estar bajo control total de React.

Para flujos robustos de negocio, lo habitual es usar inputs controlados salvo casos concretos.

Estado de formulario como objeto

En formularios medianos conviene centralizar campos en un único objeto de estado.

Submit y prevención de recarga

En React, el envío del formulario se gestiona con `onSubmit` y `event.preventDefault()`.

Sin `preventDefault`, el navegador recarga la página y pierdes estado local.

Es buena práctica validar y normalizar datos justo antes del envío.

Mantén lógica de submit separada de render para que el componente siga legible.

  • Capturar evento submit.
  • Evitar refresh de navegador.
  • Validar datos antes de enviar.
  • Gestionar feedback de éxito/error.
React
11

Formularios controlados en React: fuente única de verdad

Domina inputs controlados para construir formularios predecibles, validables y fáciles de mantener en aplicaciones reales.

Código del tema: const form = useForm();

📘 Teoría

Qué convierte un input en controlado

Debe recibir su valor desde estado y notificar cambios vía `onChange`.

1

Si usas `value={estado}` pero no actualizas en `onChange`, el input queda bloqueado.

2

Si usas `defaultValue`, el input arranca con un valor pero deja de estar bajo control total de React.

3

Para flujos robustos de negocio, lo habitual es usar inputs controlados salvo casos concretos.

Estado de formulario como objeto

En formularios medianos conviene centralizar campos en un único objeto de estado.

Submit y prevención de recarga

En React, el envío del formulario se gestiona con `onSubmit` y `event.preventDefault()`.

Sin `preventDefault`, el navegador recarga la página y pierdes estado local.

Es buena práctica validar y normalizar datos justo antes del envío.

Mantén lógica de submit separada de render para que el componente siga legible.

  • Capturar evento submit.
  • Evitar refresh de navegador.
  • Validar datos antes de enviar.
  • Gestionar feedback de éxito/error.

🧪 Aprende probando

Ejemplo Ejemplo: login controlado Dos campos controlados con actualización centralizada y submit gestionado.

🏁 Retos

Reto Reto: conecta el input de nombre Completa el input para que use estado controlado del campo `nombre`.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre React.

Test de React

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com