Los formularios son una parte fundamental de cualquier aplicación web.
En React, los formularios se gestionan normalmente mediante inputs controlados.

Inputs controlados

Un input controlado es aquel cuyo valor depende del estado.

const [name, setName] = useState("");

<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

React controla en todo momento el valor del input.

Manejo de formularios completos

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button>Enviar</button>
    </form>
  );
}

Validaciones básicas

if (!email.includes("@")) {
  alert("Email inválido");
}

Buenas prácticas

• Usar inputs controlados
• Prevenir el submit por defecto
• Validar antes de enviar