Formulários e Manipulação de Eventos no React: Guia para Iniciantes

Construir formulários eficientes é essencial para criar aplicativos React interativos. Além disso, saber como lidar com eventos garante que o usuário tenha uma experiência fluida e que os dados sejam processados corretamente. Neste artigo, vamos explorar como capturar eventos, controlar campos de formulário e manter os dados sincronizados com o estado da aplicação, com exemplos práticos.

Manipulação de Eventos no React

Diferente do HTML puro, em React os eventos seguem uma convenção baseada em camelCase e utilizam funções para manipulação.

Exemplo básico:

import React from 'react';

function Botao() {
  function handleClick() {
    alert('Botão clicado!');
  }

  return <button onClick={handleClick}>Clique aqui</button>;
}

export default Botao;

🔍 Destaques:

Use onClick, onChange, onSubmit e outros eventos com camelCase.
Passe a referência da função, sem () — assim, ela só é chamada quando o evento ocorre.

Formulários Controlados: Mantendo o Estado Sincronizado

Formulários controlados mantêm os valores dos campos no estado do componente, permitindo maior controle sobre os dados.

import React, { useState } from 'react';

function Formulario() {
  const [nome, setNome] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Olá, ${nome}!`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nome}
        onChange={(e) => setNome(e.target.value)}
        placeholder="Digite seu nome"
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default Formulario;

🔍 Como funciona:

O valor do <input> é sempre atualizado pelo estado nome.
A função setNome atualiza o estado a cada digitação.
O onSubmit previne o comportamento padrão e processa os dados.

Vários Campos com um Único Estado

Podemos gerenciar vários campos em um único objeto de estado.

import React, { useState } from 'react';

function FormularioCompleto() {
  const [formData, setFormData] = useState({
    nome: '',
    email: '',
  });

  function handleChange(e) {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="nome"
        value={formData.nome}
        onChange={handleChange}
        placeholder="Nome"
      />
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default FormularioCompleto;

🔍 Vantagem: Facilita o gerenciamento de formulários com muitos campos.

Eventos Comuns em Formulários React

onChange: Detecta alterações em campos de texto, caixas de seleção, etc.
onSubmit: Captura o envio do formulário.
onClick: Ações de botões.
onFocus/onBlur: Detecta quando um campo recebe ou perde foco.

Boas Práticas

Sempre use event.preventDefault() para evitar que o navegador recarregue ao enviar o formulário.
Validação no estado: Valide dados no próprio React antes de enviar ao servidor.
Separação de componentes: Divida formulários complexos em componentes menores para facilitar manutenção.
Acessibilidade: Use label com htmlFor para associar rótulos aos campos.

Conclusão

Formulários e eventos são peças-chave para criar aplicativos React interativos e confiáveis. Ao controlar os valores dos campos pelo estado e lidar corretamente com eventos, você garante uma experiência de usuário fluida e escalável.

Conteúdo adaptado do livro “The Road to React”, de Robin Wieruch.