Gestionnaires d'événements (Event handlers)

La fonction qui réagit : Qu'est-ce qu'un gestionnaire d'événements ?

Nous avons vu comment attacher un écouteur d'événements en JSX en passant une référence de fonction à une prop comme `onClick` ou `onChange`. Cette fonction que nous passons est appelée un gestionnaire d'événements (ou event handler en anglais). C'est la fonction JavaScript qui sera effectivement exécutée par React lorsque l'événement correspondant se produira sur l'élément DOM.

Le rôle du gestionnaire d'événements est d'encapsuler la logique qui doit s'exécuter en réponse à l'interaction utilisateur. Cela peut inclure :

• Mettre à jour l'état du composant (avec `setEtat`).
• Appeler une fonction passée en prop par le parent (pour remonter une information ou une action).
• Effectuer des appels API.
• Manipuler d'autres parties de la logique applicative.

Définir correctement ces fonctions gestionnaires est donc crucial pour l'interactivité de vos composants.

Définition des gestionnaires dans les composants

Il existe plusieurs manières courantes de définir ces fonctions gestionnaires :

1. Fonctions déclarées à l'intérieur du composant fonctionnel : C'est l'approche la plus fréquente dans les composants fonctionnels. Vous déclarez une fonction (souvent une fonction fléchée assignée à une constante) directement dans le corps du composant.

import React, { useState } from 'react';

function BoutonSimple() {
  const [clics, setClics] = useState(0);

  // Déclaration du gestionnaire à l'intérieur du composant
  const handleClick = () => {
    console.log('Bouton cliqué !');
    setClics(prevClics => prevClics + 1); // Mise à jour de l'état
  };

  return (
    

      
Nombre de clics : {clics}
      {/* Passage de la référence de la fonction */} 
      Cliquez ici
    
  );
}

L'avantage est que cette fonction a accès à la portée du composant (props, state, autres variables).

2. Fonctions fléchées définies en ligne (Inline Arrow Functions) : Vous pouvez définir une petite fonction fléchée directement dans l'attribut JSX.

function BoutonEnLigne() {
  return (
     alert('Clic en ligne !')}>
      Clic (en ligne)
    
  );
}

C'est pratique pour des actions très simples. Cependant, cela peut avoir des implications sur les performances dans certains scénarios (une nouvelle fonction est créée à chaque rendu), bien que ce soit souvent négligeable pour des cas simples. C'est aussi très utile pour passer des arguments (voir section suivante).

3. Méthodes de classe (pour les composants classe) : Dans les composants classe, les gestionnaires sont typiquement définis comme des méthodes de la classe. Il faut alors gérer correctement le `this` (souvent en utilisant des fonctions fléchées comme propriétés de classe ou le `bind` dans le constructeur).

class BoutonClasse extends React.Component {
  state = { clics: 0 };

  // Gestionnaire défini comme fonction fléchée (propriété de classe)
  // 'this' est automatiquement lié correctement.
  handleClick = () => {
    console.log('Clic (classe) !');
    this.setState(prevState => ({ clics: prevState.clics + 1 }));
  }

  render() {
    return (
      

        
Clics (classe) : {this.state.clics}
        Cliquez (Classe)
      
    );
  }
}

Recevoir l'objet événement

Lorsqu'un événement DOM se produit, le navigateur crée un objet événement contenant des informations sur cet événement (par exemple, la position de la souris pour un `onMouseMove`, la touche pressée pour un `onKeyDown`, ou l'élément cible `event.target` pour la plupart des événements).

React encapsule cet objet événement natif dans un objet événement synthétique (SyntheticEvent). Cet objet synthétique est automatiquement passé comme premier argument à votre fonction gestionnaire d'événements.

L'objet événement synthétique normalise le comportement de l'événement à travers différents navigateurs et expose une interface similaire à l'API standard des événements DOM.

function ChampSaisie() {
  const [valeur, setValeur] = useState('');

  // Le gestionnaire reçoit l'objet 'event' automatiquement
  const handleChange = (event) => {
    // Accès à la valeur actuelle de l'input via event.target.value
    console.log('Nouvelle valeur saisie :', event.target.value);
    setValeur(event.target.value);
  };

  return (
    
  );
}

Vous pouvez accéder aux propriétés standard de l'événement comme `event.target` (l'élément DOM où l'événement a eu lieu), `event.preventDefault()` (pour empêcher le comportement par défaut, comme la soumission d'un formulaire), `event.stopPropagation()` (pour arrêter la propagation de l'événement aux éléments parents), `event.key` (pour les événements clavier), etc.

Conventions de nommage

Il est courant de nommer les fonctions gestionnaires d'événements en utilisant le préfixe `handle` suivi du nom de l'événement ou de l'action effectuée, en camelCase. Par exemple : `handleClick`, `handleChange`, `handleSubmit`, `handleMouseEnter`, `handleKeyDown`.

Cette convention rend le code plus facile à lire et à comprendre, car elle indique clairement le rôle de la fonction.

Conclusion : La logique derrière l'interaction

Les gestionnaires d'événements sont les fonctions JavaScript qui donnent un sens aux interactions utilisateur capturées par les écouteurs d'événements en JSX. En définissant ces fonctions (généralement à l'intérieur de vos composants fonctionnels ou comme méthodes de classe) et en leur passant la référence dans les props d'événement (`onClick={handleClick}`), vous pouvez exécuter n'importe quelle logique nécessaire en réponse à l'action de l'utilisateur.

Ces gestionnaires reçoivent automatiquement l'objet événement synthétique de React, vous permettant d'accéder aux détails de l'événement et de contrôler son comportement. C'est ainsi que vous construisez la logique interactive de vos applications React.