XP 0

Eventos no React

onClick

No React, eventos usam camelCase e recebem a função entre chaves (não uma string):

<button onClick={adicionar}>+1</button>

Compare com o HTML puro (onclick="adicionar()" — tudo minúsculo, string). No React é onClick={adicionar} — C maiúsculo, sem aspas, a função entre chaves.

Muito comum é uma função anônima ali mesmo, para passar um argumento:

<button onClick={() => setQtd(qtd + 1)}>+1</button>

⚠️ Pegadinha: onClick={adicionar} passa a função (certo). onClick={adicionar()} com parênteses executa na hora (errado — roda ao carregar, não no clique). Passe a função, não o resultado dela.

Pontos-chave

  • onClick={funcao}
    evento em camelCase, função entre chaves (sem aspas).