Publicado em: 17/03/2025

Au 14 - Front-end - React - Processando os dados do formulário - Mestres BEGIN


Objetivo Principal

Criar um fluxo completo de cadastro com:

  • Controle de abertura/fechamento do modal
  • Captura eficiente dos dados do formulário
  • Integração com API backend
  • Atualização automática da lista após cadastro

Arquitetura do Componente

ProductSubHeader (Dispara abertura)
  ProductsPage (Controla estado do modal)
    AddProductModal
      AddProductForm (Envia dados)

Controle do Modal

Gerenciamento de estado com React Hooks:

1// ProductsPage.tsx
2const [showModal, setShowModal] = useState(false);
3const handleOpenModal = () => setShowModal(true);
4{showModal && (
5    <div>
6        <div className="modal-content">
7        <button onClick={() => setShowModal(false)}>X</button>
8        <AddProductForm onSuccess={() => { setShowModal(false); refreshProducts(); }} />
9    </div>
10    </div>
11)}

Manipulação do Formulário com FormData

Solução eficiente para captura de dados:

1const handleSubmit = async (e: React.FormEvent) => {
2    e.preventDefault();
3    // 1. Coleta os dados do formulário
4    const formData = new FormData(e.currentTarget as HTMLFormElement);
5    // 2. Converte para objeto JavaScript
6    const productData = Object.fromEntries(formData.entries());
7    // 3. Ajuste de tipos (todos os valores vem como string)
8    const payload = { ...productData, price: Number(productData.price), quantity: Number(productData.quantity) };
9    console.log("Dados enviados:", payload);
10};

Vantagens do FormData:

  • Elimina a necessidade de múltiplos estados
  • Reduz código boilerplate
  • Mantém a referência nativa dos inputs

Integração com Backend

Fluxo completo de envio dos dados:

1try {
2    // 1. Envio para API
3    const response = await api.post("/products", payload);
4    // 2. Notificação de sucesso
5    toast.success("Produto cadastrado!");
6    // 3. Execução do callback onSuccess();
7    onSuccess();
8    // 4. Reset do formulário (e.target as HTMLFormElement).reset();
9} catch (error) {
10    console.error("Falha no cadastro:", error);
11    toast.error("Erro ao cadastrar produto");
12}

Estrutura do Formulário

Exemplo de campos com atributos name:

Desafios e Soluções

DesafioSolução Implementada
Campos não capturadosAdicionar atributo name em todos os inputs
Inconsistência com APIAlinhar name com as chaves do backend
Valores como stringConversão explícita de tipos (number, boolean)

Fluxo de Atualização Automática

  1. Sucesso no POST /products
  2. Fecha o modal (setShowModal(false))
  3. Callback onProductCreation()
  4. ProductsPage refaz GET /products
  5. Estado da lista atualizado
  6. Nova renderização com produto cadastrado

Próximas Melhorias

Validação

  • Campos obrigatórios
  • Formato de preço
  • Feedback visual

UX

  • Estado de loading
  • Animações
  • Foco automático

Segurança

  • Tratamento de erros
  • Timeout de requisição
  • Retry automático

Conclusões

  • FormData simplifica drasticamente o gerenciamento de formulários
  • Callbacks permitem comunicação flexível entre componentes
  • Atributo name é essencial para o funcionamento correto
"A implementação demonstrou como combinar APIs nativas do navegador com React pode resultar em soluções mais limpas e eficientes."
Fernando Cunha
Artigo deFernando Cunha

Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.

últimos vídeos

veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN
play

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Autor deste artigo
Fernando Cunha17/03/2025
Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN
play

Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Autor deste artigo
Fernando Cunha17/03/2025
Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN
play

Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.

Autor deste artigo
Fernando Cunha17/03/2025