Tratamento de eventos: onClick e onChange

Objetivo: tratar cliques e alterações de texto usando os eventos sintéticos do React para obter um comportamento consistente entre navegadores.

• onClick aciona ações
• onChange lê valores dos campos de entrada
• O objeto do evento contém detalhes

Associe uma função de tratamento: onClick={handle}. Mantenha as funções pequenas; atualize o estado com funções de atualização (prefira o atualizador funcional se usar o valor anterior).

onChange é acionado quando o usuário edita um campo de entrada. Leia o texto de event.target.value e mantenha o estado como a fonte única da verdade.

Demonstração: incremente ao clicar, espelhe o campo de entrada com onChange e impeça que o envio do formulário recarregue a página com event.preventDefault().

Eventos sintéticos envolvem eventos nativos para garantir consistência. Leia os valores dentro da função de tratamento; mantenha as funções de tratamento curtas e objetivas.

• Use event.preventDefault() em formulários
• Use event.target.value em campos de entrada

Dicas:

• Não altere o DOM diretamente; deixe o estado controlar a interface.
• Evite lógica complexa em linha nas funções de tratamento — chame funções pequenas.
• Use o atualizador funcional ao usar o estado anterior.

Recapitulação: use onClick para ações e onChange para campos de entrada; leia os valores de event.target.value; impeça os recarregamentos padrão de formulários quando necessário.