Formularios y componentes controlados

⏱ 55 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Crear campos controlados de todos los tipos.
Manejar un formulario completo con un solo objeto de estado.
Enviar un formulario con onSubmit.
Validar y dar retroalimentación al usuario.

1.Componentes controlados

En HTML normal, un <input> guarda su propio valor: tú lo lees cuando lo necesitas. En React hay una forma más potente: el estado es la única fuente de la verdad y el campo solo muestra lo que dice el estado. A esto se le llama un componente controlado.

<input

value={nombre}muestra el estado

onChange={e => setNombre(e.target.value)}actualiza el estado

⚛️ Tu primer campo controlado

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function App() {
  const [nombre, setNombre] = useState("");

  return (
    <main>
      <label htmlFor="nombre">Tu nombre</label>{" "}
      <input
        id="nombre"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
      />
      <p>Hola, {nombre || "desconocida"} 👋</p>
      <p>Tu nombre tiene {nombre.length} letras.</p>
    </main>
  );
}

Resultado

Consola

El estado nombre guarda el texto.
El campo muestra value={nombre}.
Cada tecla dispara onChange, que actualiza el estado con e.target.value.
React vuelve a dibujar y el campo muestra el valor nuevo.

💡 Consejo · Ventajas

Como el valor vive en el estado, puedes mostrarlo en otras partes (como el saludo y el contador de letras), validarlo, darle formato o borrarlo (setNombre("")) en cualquier momento.

⚠️ Importante · No olvides onChange

Si pones value sin onChange, el campo queda bloqueado: no puedes escribir y React avisa en la consola. Si solo quieres un valor inicial editable, usa defaultValue.

2.Cada tipo de campo, a su manera

Campo	Propiedad que se controla	Valor que lees
`<input type="text">`, `email`, `number`…	`value`	`e.target.value`
`<textarea>`	`value` (¡como un input!)	`e.target.value`
`<select>`	`value`	`e.target.value`
`<input type="checkbox">`	`checked`	`e.target.checked`
`<input type="radio">`	`checked` de cada opción	`e.target.value`

⚛️ Texto, selección, casilla y opciones

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function App() {
  const [mensaje, setMensaje] = useState("");
  const [pais, setPais] = useState("pe");
  const [suscrito, setSuscrito] = useState(false);
  const [plan, setPlan] = useState("gratis");

  return (
    <main style={{ display: "grid", gap: 10 }}>
      <textarea value={mensaje} onChange={(e) => setMensaje(e.target.value)} placeholder="Escribe un mensaje" />

      <select value={pais} onChange={(e) => setPais(e.target.value)}>
        <option value="pe">Perú</option>
        <option value="mx">México</option>
        <option value="es">España</option>
      </select>

      <label>
        <input type="checkbox" checked={suscrito} onChange={(e) => setSuscrito(e.target.checked)} />{" "}
        Recibir novedades
      </label>

      <fieldset>
        <legend>Plan</legend>
        {["gratis", "pro"].map((p) => (
          <label key={p} style={{ marginRight: 12 }}>
            <input type="radio" name="plan" value={p} checked={plan === p} onChange={(e) => setPlan(e.target.value)} /> {p}
          </label>
        ))}
      </fieldset>

      <pre>{JSON.stringify({ mensaje, pais, suscrito, plan }, null, 2)}</pre>
    </main>
  );
}

Resultado

Consola

3.Muchos campos, un solo estado

Con formularios largos, un useState por campo se vuelve pesado. Una técnica muy común es guardar un objeto y usar el atributo name de cada campo para actualizar la propiedad correcta con una sola función:

⚛️ Un manejador para todos los campos

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function App() {
  const [datos, setDatos] = useState({ nombre: "", correo: "", ciudad: "" });

  function cambiar(e) {
    const { name, value } = e.target;
    setDatos({ ...datos, [name]: value });   // [name]: propiedad calculada
  }

  return (
    <main style={{ display: "grid", gap: 8, maxWidth: 320 }}>
      <input name="nombre" value={datos.nombre} onChange={cambiar} placeholder="Nombre" />
      <input name="correo" value={datos.correo} onChange={cambiar} placeholder="Correo" />
      <input name="ciudad" value={datos.ciudad} onChange={cambiar} placeholder="Ciudad" />
      <p>{datos.nombre} · {datos.correo} · {datos.ciudad}</p>
    </main>
  );
}

Resultado

Consola

📌 Nota · [name]: value

Los corchetes crean una propiedad calculada: si name vale "correo", el objeto resultante cambia correo. Combinado con ...datos (que copia lo demás) actualizas un campo sin tocar el resto.

4.Enviar el formulario

Para manejar el envío usa onSubmit en el <form> (no onClick en el botón: así también funciona al pulsar Enter). Siempre empieza con e.preventDefault(); si no, el navegador recarga la página.

⚛️ onSubmit y preventDefault

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function App() {
  const [tarea, setTarea] = useState("");
  const [tareas, setTareas] = useState([]);

  function agregar(e) {
    e.preventDefault();                 // evita que la página se recargue
    const texto = tarea.trim();
    if (!texto) return;                 // no agregues vacíos
    setTareas([...tareas, { id: Date.now(), texto }]);
    setTarea("");                       // limpia el campo
  }

  return (
    <main>
      <form onSubmit={agregar}>
        <input value={tarea} onChange={(e) => setTarea(e.target.value)} placeholder="Nueva tarea" />{" "}
        <button type="submit">Agregar</button>
      </form>
      <ul>
        {tareas.map((t) => <li key={t.id}>{t.texto}</li>)}
      </ul>
    </main>
  );
}

Resultado

Consola

5.Validar y dar retroalimentación

Como los datos están en el estado, validar es calcular en cada dibujo si son correctos. No hace falta un estado extra para los errores: se derivan.

⚛️ Validación derivada del estado

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function App() {
  const [correo, setCorreo] = useState("");
  const [clave, setClave] = useState("");

  // Valores derivados: se calculan, no se guardan
  const correoValido = /^\S+@\S+\.\S+$/.test(correo);
  const claveValida = clave.length >= 8;
  const puedeEnviar = correoValido && claveValida;

  return (
    <form onSubmit={(e) => e.preventDefault()} style={{ display: "grid", gap: 8, maxWidth: 320 }}>
      <label>Correo
        <input type="email" value={correo} onChange={(e) => setCorreo(e.target.value)} />
      </label>
      {correo && !correoValido && <small role="alert" style={{ color: "#b91c1c" }}>Escribe un correo válido.</small>}

      <label>Contraseña
        <input type="password" value={clave} onChange={(e) => setClave(e.target.value)} />
      </label>
      <small>{clave.length}/8 caracteres como mínimo</small>

      <button disabled={!puedeEnviar}>Crear cuenta</button>
    </form>
  );
}

Resultado

Consola

Valida al escribir para guiar, y al enviar para asegurar.
No muestres errores antes de tiempo: espera a que el campo tenga contenido o haya sido tocado.
Deshabilita el botón solo si explicas por qué; mejor muestra el mensaje junto al campo.
Recuerda: validar en el navegador mejora la experiencia, pero la validación de seguridad real siempre se hace en el servidor.

6.Errores frecuentes

value sin onChange: el campo se bloquea.
Usar e.target.value para un checkbox: usa e.target.checked.
Olvidar e.preventDefault() en onSubmit: la página se recarga.
Valor inicial undefined: empieza siempre con "" (texto), false (casilla) o un valor definido; si no, pasarás de no controlado a controlado y React avisará.
Mutar el objeto del formulario: crea siempre una copia con { ...datos, [name]: value }.
Convertir números: e.target.value es siempre texto; usa Number(e.target.value) o e.target.valueAsNumber.
Olvidar htmlFor/id: los campos sin etiqueta asociada son inaccesibles.

📒 Apuntes para llevar

Un campo controlado muestra value del estado y actualiza el estado en onChange.
Sin onChange, un campo con value queda bloqueado.
Textos, textarea y select usan value; las casillas y radios usan checked.
Con muchos campos, guarda un objeto y actualiza con { ...datos, [name]: value }.
Usa onSubmit en el <form> y llama a e.preventDefault().
La validación se deriva del estado: no necesitas estado extra para los errores.
La validación en el navegador es comodidad; la de seguridad va en el servidor.

7.Glosario

Término	Significado
Componente controlado	Campo cuyo valor lo dicta el estado de React.
`onChange`	Evento que se dispara cuando cambia el valor de un campo.
`e.target`	El elemento que provocó el evento; `value` y `checked` salen de él.
`preventDefault`	Cancela la acción por defecto del navegador (por ejemplo, recargar al enviar).
Propiedad calculada	Sintaxis `{ [name]: value }` que usa una variable como nombre de propiedad.
Validación	Comprobar que los datos cumplen las reglas esperadas.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué hace controlado a un campo de texto?

¿Qué propiedad lees en un checkbox?

Los checkboxes y radios usan checked.

¿Qué pasa si olvidas e.preventDefault() en onSubmit?

¿Para qué sirve { ...datos, [name]: value }?

e.target.value de un <input type="number">, ¿qué tipo tiene?

Siempre es texto; conviértelo con Number() si lo necesitas.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio