Formularios simples y campos controlados

Un campo controlado recibe su valor desde el estado de React. Cuando el usuario escribe, el evento onChange actualiza ese estado. Así la pantalla y el dato que usa el componente permanecen coordinados.

1import { useState, type ChangeEvent, type FormEvent } from 'react';
2
3export default function Ejem_18() {
4  const [name, setName] = useState('Manolo');
5  const [enviado, setEnviado] = useState('');
6
7  function handleChangeName(event: ChangeEvent<HTMLInputElement>) {
8    setName(event.target.value);
9  }
10
11  function handleSubmit(event: FormEvent<HTMLFormElement>) {
12    event.preventDefault();
13    setEnviado(name.trim());
14  }
15
16  return (
17    <form onSubmit={handleSubmit}>
18      <label>
19        Nombre:
20        <input value={name} onChange={handleChangeName} required />
21      </label>
22      <button type="submit">Enviar</button>
23      {enviado && <p role="status">Se envió el formulario: {enviado}</p>}
24    </form>
25  );
26}

value={name} coloca el estado en el campo. onChange guarda el nuevo texto mediante event.target.value. Si defines value pero no actualizas el estado al escribir, el campo parecerá bloqueado.

Enviar el formulario #

onSubmit se coloca en el formulario. Funciona al pulsar Enviar y también mediante las formas habituales de envío con teclado. event.preventDefault() evita la navegación o recarga que produciría el envío HTML normal; no borra el campo ni envía datos a un servidor.

La práctica guarda un mensaje local en enviado. Para persistir datos necesitarías una petición a un backend. trim() elimina espacios al principio y al final del texto enviado.

Etiquetas y tipos #

El label envuelve el campo para asociarlo a su descripción. El tipo ChangeEvent<HTMLInputElement> corresponde al cambio del input; FormEvent<HTMLFormElement> corresponde al envío.

Inicializa el estado con una cadena, como '' o 'Manolo', para mantener el input controlado desde el principio. required aporta una comprobación del navegador, pero en aplicaciones reales las reglas de los datos también deben comprobarse donde se procesan.

Prueba tú #

Cambia el nombre, envía y comprueba que no se recarga la página. Escribe otro valor: el mensaje enviado debe conservar el anterior hasta el siguiente envío.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.