Formularios

Enviar un formulario

Para agrupar campos y enviarlos, usa un <form> con el evento onSubmit. Lo primero dentro del manejador es e.preventDefault(), para que el navegador no recargue la página (su comportamiento por defecto):

function Login() {
  const [usuario, setUsuario] = useState("");

  function enviar(e) {
    e.preventDefault();
    console.log("Enviando:", usuario);
  }

  return (
    <form onSubmit={enviar}>
      <input value={usuario} onChange={(e) => setUsuario(e.target.value)} />
      <button type="submit">Entrar</button>
    </form>
  );
}

El onSubmit se dispara al pulsar un <button type="submit"> (o al pulsar Enter dentro del input).

Varios campos

Con varios campos, lo habitual es un estado por campo, cada uno controlado:

function Registro() {
  const [nombre, setNombre] = useState("");
  const [email, setEmail] = useState("");

  function enviar(e) {
    e.preventDefault();
    console.log({ nombre, email });
  }

  return (
    <form onSubmit={enviar}>
      <input value={nombre} onChange={(e) => setNombre(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Registrar</button>
    </form>
  );
}

Inputs no controlados (a vista de pájaro)

Existe una alternativa: dejar que el DOM gestione el valor y leerlo solo cuando hace falta mediante una ref (useRef). Son los inputs no controlados:

function Busqueda() {
  const inputRef = useRef(null);
  function enviar(e) {
    e.preventDefault();
    console.log(inputRef.current.value); // se lee al enviar
  }
  return (
    <form onSubmit={enviar}>
      <input ref={inputRef} />
      <button>Buscar</button>
    </form>
  );
}

Son cómodos para casos simples, pero pierdes la validación en vivo y el control total. En la mayoría de los casos se prefieren los inputs controlados.