O Gerenciamento de Eventos no React

O gerenciamento de eventos no React é semelhante ao do DOM, mas com algumas diferenças importantes. O React utiliza um sistema de eventos sintéticos para otimizar o desempenho e garantir consistência entre os navegadores.

Os Eventos Básicos

Gerenciamento de cliques

function Button() {
  const handleClick = (event) => {
    console.log('Bouton cliqué !');
    // event é um evento sintético do React
  };

  return <button onClick={handleClick}>Cliquez-moi</button>;
}

Eventos de formulário

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Impede o recarregamento da página
    console.log('Formulaire soumis');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Connexion</button>
    </form>
  );
}

Os Eventos Sintéticos

O React encapsula os eventos do navegador em eventos sintéticos para:

1. Garantir consistência entre os navegadores
2. Otimizar o desempenho
3. Gerenciar o batching das atualizações

Exemplo de uso

function EventExample() {
  const handleMouseEnter = (event) => {
    // event é um evento sintético
    console.log('Type d\'événement:', event.type);
    console.log('Cible:', event.target);
    console.log('Position:', event.clientX, event.clientY);
  };

  return (
    <div onMouseEnter={handleMouseEnter}>
      Survolez-moi
    </div>
  );
}