React: Formularios con inputs controlados

En jerga de React, controlar un formulario es simplemente pasar el control del formulario de los comportamientos predefinidos de HTML a React. Es cierto que vas a leer muchas cosas (en la propia documentación) pero el concepto, de base, es ese.

¿Cómo se controla un formulario?

Veamos el ejemplo que nos ponen en la documentación:

function Form() {
  const [firstName, setFirstName] = useState('');
  // ...
  return (
    <input
      value={firstName}
      onChange={e => setFirstName(e.target.value)}
    />
  );
}

¿Qué está pasando aquí?

1. Recuerda que el componente se está renderizando en un bucle cada vez que cambiamos el estado.
2. onChange está cambiando el estado de firstName cada vez que cambiamos el texto del input.
3. El valor del input siempre va a estar relacionado con el texto que hayamos escrito en el campo, no se va a actualziar sólo al enviar el formulario.

Dicho de otra manera:

Esto permite que el manejo de estado de React esté actualizado en tiempo real con el texto que el usuario haya escrito en el campo.

¿Se puede hacer con vanillaJS?

Por supuesto, pero la mayoría de tutoriales asumen un conocimiento de JS, yo diría que escaso. Después de todo puedes usar onChange con JavasCript, llamar a una función y usar el objeto de eventos para hacer lo que te dé la gana, incluyendo llamar a setFirstName().

Pero digamos que esto es la react-way que los chicos de React te ofrecen para integrarlo mejor con otras cosas que estés haciendo con la librería.

Damos por hecho que no estás usando React sólo para renderizar un formulario, claro.

Más información

• Controlled Inputs de Coding Addict (10 mins)