Formularios controlados

Aprende a controlar cada campo de un formulario desde el estado de React para poder validar y enviar datos fiables.

8 min · 3 preguntas

En React, un formulario se vuelve predecible cuando cada campo está controlado: el valor mostrado proviene del estado del componente y cada pulsación de tecla pasa por onChange para actualizar ese estado. El DOM deja de ser la fuente de la verdad: tu estado lo es. En la práctica, enlazas la prop value a una variable de estado y proporcionas un manejador que llama a la función de actualización.

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

Un formulario real rara vez tiene un solo campo. En lugar de acumular llamadas a useState, agrupa los valores en un único objeto y escribe un manejador genérico. El atributo name de cada campo debe coincidir exactamente con una clave del objeto: eso es lo que le indica al manejador qué propiedad actualizar.

const [form, setForm] = useState({
  username: "",
  password: "",
});

function handleChange(e) {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
}

Queda el envío. Por defecto, el navegador recarga la página cuando se envía un formulario: llama a e.preventDefault() al principio de tu manejador onSubmit. También es el lugar adecuado para validar los datos antes de enviarlos, ya que todo el estado del formulario está a mano.

function handleSubmit(e) {
  e.preventDefault();
  if (form.username.trim() === "") {
    alert("Username is required.");
    return;
  }
  console.log("Submitting:", form);
}

return (
  <form onSubmit={handleSubmit}>
    <input
      name="username"
      value={form.username}
      onChange={handleChange}
    />
    <button type="submit">Create account</button>
  </form>
);

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué define a un campo controlado en React?
   • Su valor se almacena en el DOM y se lee con una ref
   • Su valor proviene del estado y cada pulsación de tecla pasa por onChange
   • Es de solo lectura hasta que se envía el formulario
   • Valida automáticamente los datos que escribes
2. Pasas value={email} a un <input> sin proporcionar un onChange. ¿Qué ocurre?
   • El campo se congela: escribir ya no tiene ningún efecto
   • El campo funciona con normalidad, React gestiona la entrada por sí solo
   • El componente falla en el primer renderizado
3. ¿Para qué sirve e.preventDefault() en el manejador onSubmit?
   • Para evitar la recarga de la página que provoca el envío nativo del formulario
   • Para limpiar automáticamente los campos del formulario
   • Para impedir que el evento se propague a los componentes padres
   • Para desactivar la validación HTML del navegador