Event Handling Tratamento de eventos
Última atualização: 2026-11-03
Event Handling Tratamento de eventos
O React liga eventos com props onXxx em camelCase, como onClick e onChange, e o valor de uma prop assim é uma função. Quando o evento dispara, o handler normalmente lê o input ou chama setState para que a interface responda à ação do usuário — o padrão básico por trás de todo componente interativo. A convenção de nomes é proposital: os atributos do DOM são minúsculos, as props do React são camelCase.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
<button onClick={() => setCount(count + 1)}>+1</button>
// ↑ nome do evento em camel case ↑ passe a própria função, não o resultado de chamá-la⚙️ Parâmetros
| onXxx (handler) | Uma função que recebe o objeto de evento sintético; pode ser uma arrow function inline ou uma função handleXxx definida no componente. |
|---|
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
A página mostra uma contagem de curtidas, três botões, uma linha de mensagem e um campo de texto: "Like" aumenta o número, "Show a message" imprime seu texto, digitar no campo repete o que foi digitado logo abaixo e "Reset" limpa tudo.💡 Pontos-chave
⚠️ Aviso onClick={fn()} executa a função durante a renderização e usa o valor de retorno como handler — passe a própria função: onClick={fn} ou () => fn().
💡 Dica Mova handlers complexos para o corpo do componente como funções handleXxx nomeadas; mantenha arrow functions inline para casos que cabem em uma linha.
ℹ️ Informação Os eventos do React são eventos sintéticos (SyntheticEvent), que unificam as diferenças entre navegadores se comportando de forma parecida com os eventos nativos.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Como eu ligo um evento de clique no React?
R Escreva onClick={handler} no elemento, usando um nome de evento em camel case; o handler pode ser uma função definida no componente ou uma arrow function inline.
P Por que o onClick precisa ser uma arrow function?
R O onClick precisa de uma função que seja chamada quando o evento acontece. Escrever fn() a executa imediatamente durante a renderização; escrever () => fn() adia a chamada até o clique.
P Qual a diferença entre eventos do React e eventos nativos?
R O React usa eventos sintéticos: nomes em camel case, um wrapper unificado sobre o objeto de evento nativo e a delegação anexada no nó raiz, o que melhora tanto a compatibilidade quanto a performance.
