Manipular eventos

Eventos no React

Uma interface ganha vida quando reage ao que o usuário faz. No React, você escuta eventos passando uma função manipuladora para props como onClick, onChange ou onSubmit. Essas props são escritas em camelCase e recebem uma função, não o resultado dela:

function Botao() {
  function manipularClique() {
    console.log("Você clicou!");
  }
  return <button onClick={manipularClique}>Clique</button>;
}

Repare que passamos manipularClique (a função), não manipularClique(). Se você escrevesse onClick={manipularClique()} a função seria executada ao renderizar, não ao clicar.

Manipuladores em linha

Quando o manipulador é curto, é comum escrevê-lo como uma função flecha em linha. Isso também é útil quando você precisa passar argumentos para ele:

<button onClick={() => setContagem(contagem + 1)}>Somar</button>
<button onClick={() => saudar("Ana")}>Saudar a Ana</button>

O objeto do evento

O React passa ao manipulador um objeto do evento (por convenção o chamamos de e) com informações sobre o que aconteceu e métodos úteis:

function Link() {
  function manipular(e) {
    e.preventDefault(); // evita o comportamento padrão do navegador
    console.log("clique interceptado");
  }
  return <a href="https://exemplo.com" onClick={manipular}>Não navega</a>;
}

e.preventDefault() cancela a ação padrão do navegador: que um link navegue, ou que um formulário recarregue a página ao ser enviado. Você verá isso constantemente ao trabalhar com formulários.

Existe um evento para quase tudo: onClick, onChange, onSubmit, onMouseEnter, onKeyDown... Todos recebem esse objeto do evento e.