2. Gérer les interactions de l’utilisateur

Quand un utilisateur clique sur un lien, presse un bouton ou saisie du texte, on veut en être informé dans notre composant. Toutes ces actions lèvent des événements dans le DOM, avec lequel nous voudrions interagir. C’est un peu l’inverse de ce que nous avons vus précédemment :

On utilise les événements pour communiquer du DOM vers le composant.

Nous allons apprendre à lier n’importe quel événement du DOM à une méthode de nos composants, en utilisant la syntaxe de liaison d’événements de React.

Créer une liaison avec les événements

La syntaxe pour écouter un événement est simple. On utilise le nom de l’événement du DOM en l’adaptant à React, en utilisant la syntaxe camelCase. Ainsi, onclick devient onClick en React. On lie ensuite une méthode du composant pour déterminer comment traiter cet événement, comme ceci :

// Les importations

const App: FunctionComponent = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    setPokemons(POKEMONS);
  }, []);

  // Cette constante est en fait notre gestionnaire d'événement.
  const showPokemonsCount = () => {
    console.log(pokemons.length);
  };

  return (
    <div>
      <h1>Pokédex</h1>
      <p onClick={showPokemonsCount}>Afficher le nombre de pokémons</p>
    </div>
  );
}

export default App;

À la ligne 10, on définir une constante qui contient la fonction chargé de gérer l’événement click défini plus bas. On parle de gestionnaire d’événement. Cette méthode se contente d’afficher le nombre de pokémons dans la console du navigateur.

La plus intéressant est à la ligne 18, car nous lions notre gestionnaire d’événement à notre événement click. Pour cela, on utilise la syntaxe onClick, et on lui transmet le gestionnaire d’événement associé dans une expression JavaScript. C’est aussi simple que ça.

Les événements React sont nommés en camelCase plutôt qu’en minuscules comme les événements natifs du DOM (et sont parfois précédés par « on« ). Ainsi, l’événement onclick devient onClick en React, et mouseenter devient onMouseEnter. Mais bien sûr, il existe quelques exceptions, sinon ce ne serai pas drôle. Si vous avez un doute, tapez le nom de l’événement du DOM dans Google pour trouvez l’événement React correspondant. Par exemple, dblclick devient onDoubleClick en React.

Passer des paramètres à vos événements

Dans l’exemple précédent, notre événement renvoie toujours la même chose, indépendamment de l’élément sur lequel nous cliquons. Pourtant, il arrive souvent qu’un événement doivent prendre un ou plusieurs paramètres pour adapter son comportement. Par exemple, maintenant nous voulons afficher le nom du pokémon sur lequel l’utilisateur a cliqué :

// Gestionnaire d'événement
const showPokemonsName = (name) => {
 console.log(name);
};

// Interception de l'événement
<div>
 <p onClick={showPokemonsName("Salamèche")}> Salamèche </p>
 <p onClick={showPokemonsName("Bulbizarre")}> Bulbizarre </p>
 <p onClick={showPokemonsName("Carapuce")}> Carapuce </p>
</div>

Comme vous pouvez le constater, il n’y a rien de très compliqué. Il suffit d’ajouter un paramètre supplémentaire dans notre gestionnaire d’événement, et aussi de passer le paramètre depuis le template.

Et si j’ai besoin de passer l’événement du DOM directement dans mon composant ?

Effectivement, parfois vous aurez besoin de passer directement l’événement du DOM à votre gestionnaire d’événement. Le cas le plus courant, c’est lorsque l’utilisateur frappe une touche au clavier. Comment savoir sur quelle touche l’utilisateur a appuyer. Ou comment savoir si l’utilisateur a appuyé avec un clic gauche ou droit de sa souris. Pour répondre à cette problématique, nous devons voir comment récupérer l’événement natif du DOM :

// Gestionnaire d'événement
const addPokemon = (name, e) => {
 if (e.nativeEvent.which === 1) {
  console.log(`Le pokémon ${name} a été ajouté au pokédex, avec le clic gauche de votre souris !`);
 } else if (e.nativeEvent.which === 3) {
  console.log(`Le pokémon ${name} a été ajouté au pokédex, avec le clic droit de votre souris !`);
 }
};

// Intereption de l'événement
<button onClick={(e) => addPokemon(name, e)}>Ajouter un Pokémon</button>

Comme vous pouvez le voir, pour passer l’événement natif du DOM à notre gestionnaire d’événement, il suffit de l’ajouter en dernier paramètre de notre méthode. Ensuite, il nous reste plus qu’à interagir avec cet événement, afin d’implémenter le comportement de notre choix.

Voilà, vous êtes maintenant en mesure d’interagir avec les événements en React, bravo ! 😇