Event Parameters Parâmetros de evento
Última atualização: 2026-11-03
Event Parameters Parâmetros de evento
Um handler de evento recebe o objeto de evento e e pode ler dele valores como target.value ou key. Quando for preciso passar argumentos extras, envolva a chamada em uma arrow function — onClick={() => fn(id)} — porque escrever fn(id) a executaria durante a renderização. Desde o React 17 os objetos de evento também não são mais agrupados, então você pode guardar um com segurança e lê-lo mais tarde.
| 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
onChange={(e) => setName(e.target.value)} // e: o objeto de evento
onClick={() => remove(id)} // Argumentos extras: envolva em uma arrow function
onClick={(e) => remove(id, e)} // Os argumentos e o objeto de evento⚙️ Parâmetros
| e (event object) | O objeto de evento sintético do React; e.target.value lê o valor atual de um input e e.type indica qual evento disparou. |
|---|
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：
Três botões com amostras de cor; clicar em uma registra "Picked #xxxxxx (event type: click)" abaixo, do mais recente para o mais antigo e com no máximo três entradas — uma demonstração de passar argumentos personalizados a um handler de evento.💡 Pontos-chave
💡 Dica Escreva () => fn(x) para passar argumentos; escrever fn(x) direto executa a função durante a renderização — o bug mais comum ao passar argumentos de evento.
ℹ️ Informação As propriedades que você mais lê são e.target.value (o valor atual de um input) e e.key (qual tecla foi pressionada em um evento de teclado).
ℹ️ Informação Desde o React 17 os objetos de evento não são mais agrupados, então você pode guardar um ou lê-lo de forma assíncrona sem chamar e.persist().
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
Tratamento de eventos
Lição 5: o objeto de evento, passar argumentos e o wrapper com arrow function.
❓ Perguntas Frequentes
P Como passo argumentos para o onClick?
R Envolva a chamada em uma arrow function: onClick={() => remove(id)}; se também precisar do objeto de evento, escreva onClick={(e) => remove(id, e)}.
P Quais propriedades do objeto de evento eu mais uso?
R e.target (o elemento que disparou o evento, muitas vezes combinado com .value para ler um input), e.type (o tipo do evento), e.key (a tecla) e e.clientX/Y (a posição do mouse).
P Devo usar arrow functions ou bind para passar argumentos?
R O código moderno usa arrow functions em todo lugar; elas são mais claras de ler. O bind é a abordagem antiga, com o mesmo efeito mas pior legibilidade, então projetos novos não precisam dele.
