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

Exemple d’utilisation

function EventExample() {
  const handleMouseEnter = (event) => {
    // event est un événement synthétique
    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>
  );
}

Gestion des Formulaires

Formulaires contrôlés

function ControlledForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
}

Formulaires non contrôlés

function UncontrolledForm() {
  const formRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(formRef.current);
    console.log('Username:', formData.get('username'));
    console.log('Email:', formData.get('email'));
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="email" name="email" />
      <button type="submit">Soumettre</button>
    </form>
  );
}

Gestion des Événements Personnalisés

Création d’un événement personnalisé

function CustomEventExample() {
  const handleCustomEvent = (event) => {
    console.log('Données personnalisées:', event.detail);
  };

  useEffect(() => {
    window.addEventListener('customEvent', handleCustomEvent);
    return () => {
      window.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const triggerCustomEvent = () => {
    const event = new CustomEvent('customEvent', {
      detail: { message: 'Événement personnalisé !' }
    });
    window.dispatchEvent(event);
  };

  return (
    <button onClick={triggerCustomEvent}>
      Déclencher l'événement
    </button>
  );
}

Bonnes Pratiques

1. Délégation d’événements :

   • Utilisez la délégation d’événements pour les listes dynamiques
   • Évitez d’attacher des gestionnaires à chaque élément

2. Performance :

   • Utilisez useCallback pour les gestionnaires d’événements
   • Évitez les fonctions inline dans les props

3. Accessibilité :

   • Utilisez des gestionnaires d’événements clavier
   • Assurez-vous que les événements sont accessibles

Exercices pratiques

1. Créez un composant SearchBar qui :

   • Gère la saisie en temps réel
   • Utilise le debounce pour optimiser les performances
   • Affiche des suggestions pendant la saisie

2. Créez un composant DragAndDrop qui :

   • Permet de glisser-déposer des éléments
   • Gère les événements de glissement
   • Affiche un retour visuel pendant le glissement

3. Créez un composant FormValidation qui :

   • Valide les champs en temps réel
   • Affiche des messages d’erreur
   • Empêche la soumission si le formulaire est invalide

Conclusion

La gestion des événements est un aspect fondamental de React. Dans le prochain chapitre, nous allons explorer le routage en React, qui permet de créer des applications multi-pages.