La Gestion des Événements en React

La gestion des événements dans React est similaire à celle du DOM, mais avec quelques différences importantes. React utilise un système d'événements synthétiques pour optimiser les performances et assurer une cohérence entre les navigateurs.

Les Événements de Base

Gestion des clics

function Button() {
  const handleClick = (event) => {
    console.log('Bouton cliqué !');
    // event est un événement synthétique React
  };

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

Événements du formulaire

function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Empêche le rechargement de la page
    console.log('Formulaire soumis');
  };

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

Les Événements Synthétiques

React encapsule les événements du navigateur dans des événements synthétiques pour :

1. Assurer une cohérence entre les navigateurs
2. Optimiser les performances
3. Gérer le batching des mises à jour