Formulários controlados com várias entradas

Objetivo: criar um formulário com vários campos de entrada controlados. Cada campo de entrada recebe seu value do estado e é atualizado por onChange.

O value de um campo de entrada controlado está vinculado ao estado do React. Cada alteração é tratada por onChange e atualiza o estado.

Cada campo de entrada usa value + onChange; o estado acompanha os dois campos. O envio é tratado no React.

Vantagens dos formulários controlados:

• O estado do React é a fonte única da verdade
• Validação fácil
• Interface previsível

A validação pode ser executada no envio ou a cada alteração. Campos de entrada controlados permitem verificar os valores instantaneamente e mostrar mensagens de erro.

Dicas:

• Sempre associe value ao estado
• Use uma única função de tratamento para vários campos com name
• Impeça o recarregamento causado pelo envio padrão do formulário

Recapitulação: formulários controlados vinculam cada campo de entrada ao estado do React. Trate as alterações com onChange e mantenha o React como a fonte única da verdade.