Principiantereact

Formularios Controlados

Gestiona formularios en React con componentes controlados, validacion y manejo de envio.

Componentes controlados vs. no controlados

En un componente controlado, React es la "fuente de verdad" del valor del input. El valor siempre refleja el estado. En uno no controlado, el DOM mantiene su propio estado (se usa useRef para leerlo).

Formulario controlado completo

Un formulario controlado utiliza useState para rastrear el valor de cada input y onChange para actualizarlo.

jsx

1function RegistroForm() {
2  const [datos, setDatos] = useState({ email: "", password: "" });
3  const [error, setError] = useState("");
4
5  const handleSubmit = (e) => {
6    e.preventDefault();
7    if (!datos.email || !datos.password) {
8      setError("Todos los campos son obligatorios");
9      return;
10    }
11    setError("");
12    console.log("Enviando:", datos);
13  };
14
15  return (
16    <form onSubmit={handleSubmit}>
17      {error && <p className="error">{error}</p>}
18      <input
19        type="email"
20        value={datos.email}
21        onChange={e => setDatos(d => ({ ...d, email: e.target.value }))}
22        placeholder="Email"
23      />
24      <input
25        type="password"
26        value={datos.password}
27        onChange={e => setDatos(d => ({ ...d, password: e.target.value }))}
28        placeholder="Password"
29      />
30      <button type="submit">Registrarse</button>
31    </form>
32  );
33}

Prueba lo aprendido

Escribe código y ejecútalo directamente en el navegador.

Live Sandbox (JAVASCRIPT)

Output