Formulários

Enviar um formulário

Para agrupar campos e enviá-los, use um <form> com o evento onSubmit. A primeira coisa dentro do manipulador é e.preventDefault(), para que o navegador não recarregue a página (seu comportamento padrão):

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>
  );
}

O onSubmit dispara ao clicar em um <button type="submit"> (ou ao pressionar Enter dentro do input).

Vários campos

Com vários campos, o habitual é um estado por campo, cada um controlado:

function Cadastro() {
  const [nome, setNome] = useState("");
  const [email, setEmail] = useState("");

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

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

Inputs não controlados (visão geral)

Existe uma alternativa: deixar que o DOM gerencie o valor e lê-lo só quando necessário por meio de uma ref (useRef). São os inputs não controlados:

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

São cômodos para casos simples, mas você perde a validação ao vivo e o controle total. Na maioria dos casos os inputs controlados são preferidos.