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.
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.
Domina inputs controlados para construir formularios predecibles, validables y fáciles de mantener en aplicaciones reales.
Código del tema: const form = useForm();
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.
import { useState } from 'react';
function SignupForm() {
const [form, setForm] = useState({
nombre: '',
email: ''
});
const onChange = (e) => {
const { name, value } = e.target;
setForm((prev) => ({ ...prev, [name]: value }));
};
return (
<>
<input name="nombre" value={form.nombre} onChange={onChange} />
<input name="email" value={form.email} onChange={onChange} />
</>
);
}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.