Formularios controlados en React

El manejo de formularios es una de las tareas más comunes en el desarrollo web y, a la vez, donde más se diferencia React del HTML tradicional.

En HTML clásico, los elementos de formulario (como <input>, <textarea> o <select>) mantienen su propio estado interno. Cuando escribís en una caja de texto, el navegador guarda esa información en el DOM. Vosotros no tenéis que hacer nada.

No queremos que el DOM guarde datos a espaldas de React. Queremos que React sepa en todo momento qué hay escrito, para poder validarlo, enviarlo o transformarlo.

Para lograr esto, utilizamos el patrón de Componentes controlados.

¿Qué es un componente controlado?

Un componente controlado es un input de formulario cuyo valor es controlado por React a través del estado (useState).

El ciclo funciona así:

Parece un ciclo largo para algo tan simple como escribir una letra, pero es lo que nos da un control absoluto sobre los datos.

Implementando un Input básico

Vamos a verlo mejor viendo en un ejemplo cómo transformar un input normal en uno controlado.

import { useState } from 'react';

export default function FormularioNombre() {
  // 1. Creamos el estado para guardar el valor
  const [nombre, setNombre] = useState('');

  const handleChange = (e) => {
    // 3. Actualizamos el estado con lo que escribe el usuario
    setNombre(e.target.value);
  };

  return (
    <form>
      <label>Tu nombre:</label>
      {/* 2. Vinculamos value al estado y onChange al manejador */}
      <input  
        type="text"   
        value={nombre}
        onChange={handleChange}
      />
      
      <p>Estás escribiendo: {nombre}</p>
    </form>
  );
}

const handleChange = (e) => {
  // Transformamos el dato ANTES de guardarlo
  const valorMayusculas = e.target.value.toUpperCase();
  setNombre(valorMayusculas);
};

Textarea y Select

En HTML, algunos input tienen sus propias formas de hacer las cosas. <textarea> define su valor como texto hijo, y <select> usa el atributo selected en sus opciones.

React estandariza esto para que todos los input funcionen igual, a través del atributo value.

<textarea 
  value={mensaje} 
  onChange={e => setMensaje(e.target.value)} 
/>

const [fruta, setFruta] = useState('coco');

<select value={fruta} onChange={e => setFruta(e.target.value)}>
  <option value="lima">Lima</option>
  <option value="coco">Coco</option>
  <option value="mango">Mango</option>
</select>

Checkboxes y Radio Buttons

Los checkboxes y Radio Buttons son los “bichos raros”.

1. No usan value, usan checked.
2. En el evento, leemos e.target.checked, no e.target.value.

Es un detalle menor, pero suele causar bugs si intentas aplicar la misma lógica genérica a todo sin mirar el type.

Gestionando múltiples inputs

Si tenemos un formulario con Nombre, Apellido, Email y Edad… ¿tenemos que crear 4 variables useState y 4 funciones handleChange distintas? No parece muy práctico.

Una forma habitual de manejar formularios complejos es usar un solo objeto de estado y una función genérica de update que use el atributo name del input para saber qué actualizar.

export default function FormularioRegistro() {
  // Un solo estado tipo objeto
  const [datos, setDatos] = useState({
    nombre: '',
    email: '',
    password: '',
    aceptarTerminos: false
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    // Tratamiento especial para checkboxes
    const valorFinal = type === 'checkbox' ? checked : value;

    setDatos((prevDatos) => ({
      ...prevDatos, // Copiamos lo que había
      [name]: valorFinal // Computed Property Name: actualizamos solo la clave dinámica
    }));
  };

  return (
    <form>
      <input 
        name="nombre" 
        value={datos.nombre} 
        onChange={handleChange} 
        placeholder="Nombre"
      />
      
      <input 
        name="email" 
        value={datos.email} 
        onChange={handleChange} 
        placeholder="Email"
      />
      
      <label>
        Acepto términos
        <input 
          type="checkbox"
          name="aceptarTerminos"
          checked={datos.aceptarTerminos} // Ojo: Checkbox usa 'checked', no 'value'
          onChange={handleChange}
        />
      </label>
    </form>
  );
}