𝗘𝗻𝘁𝗲𝗻𝗱𝗲𝗻𝗱𝗼 𝗙𝗼𝗿𝗺𝘂𝗹á́𝗿𝗶𝗼𝘀 𝗻𝗼 𝗥𝗲𝗮𝗰𝘁
Os usuários interagem com aplicações web por meio de formulários. Você os utiliza para logins, buscas e páginas de contato. O React torna o gerenciamento desses dados simples por meio do state.
Componentes Controlados
No React, você frequentemente utiliza componentes controlados. Isso significa que o state do React gerencia o valor do input.
Como funciona: • A prop value conecta o input ao seu state. • O evento onChange atualiza o state conforme o usuário digita. • O React permanece como a única fonte de verdade.
O processo segue este fluxo: Entrada do Usuário → Evento onChange → Atualização do State → Re-renderização → UI Atualizada
Gerenciando Múltiplos Campos
Você não precisa de um state separado para cada input. Você pode usar um único objeto para armazenar todos os dados.
Use este padrão: • Use um único objeto de state para todo o formulário. • Use o atributo name em seus inputs. • Crie uma única função handleChange para atualizar o state.
A sintaxe [e.target.name]: e.target.value atualiza o campo específico que disparou a mudança. Isso mantém seu código limpo.
Lidando com Envios
Quando um usuário envia um formulário, o navegador atualiza a página por padrão. Isso quebra sua aplicação.
Use e.preventDefault() dentro da sua função onSubmit. Isso interrompe o recarregamento e permite que o React manipule os dados.
Tipos de Input Especiais
Diferentes inputs exigem propriedades diferentes: • Inputs de texto usam e.target.value. • Checkboxes usam e.target.checked. • Menus select usam a prop value para rastrear a opção escolhida.
Dicas de Validação
Sempre valide os dados antes de enviá-los. Verifique: • Campos obrigatórios. • Formatos de e-mail corretos. • Comprimentos mínimos de senha.
Melhores Práticas para Formulários em React
- Use componentes controlados em vez de refs.
- Armazene campos relacionados em um único objeto.
- Use atributos name significativos para cada input.
- Evite o recarregamento padrão da página ao enviar.
- Reutilize um único manipulador de mudança para todos os inputs de texto.
Dominar esses passos ajuda você a construir aplicações web profissionais.
Fonte: https://dev.to/aj_arul/understanding-forms-in-react-19gj