Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ao trabalhar com formulários em React usando TypeScript, uma dúvida comum é qual tipo usar para o evento de submissão. A dica padrão é usar FormEvent, mas ela só reconhece um valor único, como e.target.value, e não uma array de valores.
Para quem precisa iterar sobre múltiplos elementos do formulário, o ideal é tipar o evento com uma abordagem mais genérica, como React.FormEvent<HTMLFormElement>, e então acessar os elementos pelo e.currentTarget.elements. Assim, é possível fazer um loop ou mapear esses elementos, extrair seus valores e validar tudo de forma segura.
Outra alternativa é usar refs ou gerenciar o estado de cada campo. Mas, se o foco é uma validação mais rápida na submissão, acessar os elementos do formulário diretamente é uma mão na roda.
Na sua experiência, qual abordagem tem funcionado melhor para validar ou coletar os dados de formulários complexos? Ou vocês preferem usar alguma lib específica para facilitar esse processo? O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.
Concordo com o Daniel, pra validação e manipulação fica mais claro usar o estado.
No meu time, a gente sempre tenta evitar pegar elementos direto, pq fica difícil de manter. Geralmente, faço um gerenciamento de estado com useState ou até useReducer, assim a validação fica mais controlada e fácil de testar.
Eu prefiro usar refs quando o formulário é muito dinâmico ou complexo. Assim, não preciso ficar gerenciando o estado de cada campo, e fica mais fácil de fazer validações pontuais.
No meu cenário, usar
e.currentTarget.elementsajuda bastante pra validação rápida. Mas acho que o que pesa mesmo é o tipo de validação que você quer fazer e o tamanho do formulário.