O tratamento de eventos é uma parte essencial de todo site interativo. React fornece uma maneira poderosa e consistente de lidar com eventos através do seu Sistema de Evento Sintético, que é um invólucro em torno de eventos nativos como click, keydown e submit que você aprendeu nas lições anteriores. Este wrapper cross-browser garante que os eventos funcionem da mesma forma em todos os navegadores para que não haja inconsistências. Vamos ver como os eventos funcionam no React para que você possa começar a usá-los em seus projetos. No React, os manipuladores de eventos funcionam de maneira semelhante aos eventos nativos do navegador, mas com algumas adaptações. Em vez de usar nomes de atributos de evento em minúsculas como onclick e onsubmit, o React usa camelCase, como onClick e onSubmit. Além disso, em vez de usar strings para especificar o tipo de evento, o React espera uma função para o manipulador de eventos. A função manipuladora de evento é passada para o elemento como uma prop e o tipo de evento como onClick ou onSubmit é usado como um atributo em JSX. Aqui está um lembrete de como trabalhar com um evento de clique em HTML comum:

<button onclick="alert('Button clicked!')">Click Me</button>

E aqui está como você faz o mesmo em React:

function handleClick() {
  console.log("Button clicked!");
}

<button onClick={handleClick}>Click Me</button>;

Neste exemplo, handleClick registra uma mensagem no console quando o usuário clica no botão. Observe que você não precisa de parênteses após handleClick no atributo onClick, pois você está passando uma referência para a função e não a chamando. No React, funções manipuladoras de eventos geralmente começam com o prefixo handle para indicar que são responsáveis por lidar com eventos, como handleClick e handleSubmit. Quando uma ação do usuário dispara um evento, o React passa um objeto Synthetic Event para o seu manipulador. Este objeto se comporta muito como o objeto de evento nativo no vanilla JavaScript, fornecendo propriedades como type, target e currentTarget. Você pode passar event como parâmetro para a função handler e registrá-lo no console para dar uma olhada na sua estrutura:

function handleClick(event) {
  console.log(event);
}

Para evitar comportamentos padrão como o refresh do navegador durante um evento onSubmit, por exemplo, você pode chamar o método preventDefault():

function handleSubmit(event) {
  event.preventDefault();
  console.log("Form submitted!");
}

<form onSubmit={handleSubmit}>
  <input type="text" />
  <button>Submit</button>
</form>;

Você também pode impedir que um evento propague para elementos pai chamando event.stopPropagation(). Às vezes, ao lidar com casos especiais como recursos de exclusão e edição, você pode querer passar dados extras para um manipulador de eventos. Você pode fazer isso envolvendo o handler em uma função arrow inline:

function handleDelete(id) {
  console.log("Deleting item:", id);
}

<button onClick={() => handleDelete(1)}>Delete Item</button>;

É aceitável usar manipuladores de eventos inline no React porque o React gerencia eficientemente as re-renderizações e evita problemas de desempenho. No JavaScript puro, manipuladores de eventos inline podem causar problemas de desempenho ao criar novas funções a cada renderização, pois não há um DOM virtual para otimizar o processo.