Eventos: reagindo às ações da pessoa

Um botão só vira parte de uma interface interativa quando alguma lógica responde ao clique. Em React, você passa uma função para props de evento como onClick, onChange e onSubmit.

function ProductCard({ product, onAdd }) {
  function handleAdd() {
    onAdd(product);
  }

  return (
    <article>
      <h2>{product.name}</h2>
      <button type="button" onClick={handleAdd}>
        Adicionar
      </button>
    </article>
  );
}

export default function App() {
  const product = { id: 1, name: 'Café Catuaí' };

  function handleAddToCart(selectedProduct) {
    console.log('Adicionado:', selectedProduct.name);
  }

  return <ProductCard product={product} onAdd={handleAddToCart} />;
}

Repare em onClick={handleAdd}: passamos a função sem executá-la. Escrever onClick={handleAdd()} chamaria a função durante a renderização.

Em formulários, o evento também bloqueia o comportamento padrão do navegador quando você quer tratar o envio com JavaScript:

function handleSubmit(event) {
  event.preventDefault();
  console.log('Formulário enviado pelo React');
}

• Handler: é a função executada quando o evento acontece.
• Função como prop: faz com que filhos comuniquem ações a componentes acima.
• preventDefault(): cancela um comportamento padrão, como recarregar a página no submit.

No próximo nó, vamos guardar informação entre eventos usando estado.