React et les Événements

Salut à tous, c’est Ismail ! Cette semaine, je continue mon exploration de React en abordant un aspect fondamental : la gestion des événements. Que ce soit un clic sur un bouton, une saisie dans un champ ou une soumission de formulaire, les événements permettent d’interagir avec l’utilisateur et de rendre nos applications plus dynamiques. Voyons ensemble comment React facilite cette gestion et quelles bonnes pratiques adopter !

Gérer les Événements en React

En React, la gestion des événements est similaire au JavaScript natif, mais avec quelques différences importantes. Voici un exemple simple d’événement onClick :

function Bouton() {
  const handleClick = () => {
    alert("Bouton cliqué !");
  };

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

Ce qui change par rapport au JavaScript classique

1. Les événements sont nommés en camelCase (onClick au lieu de onclick).
2. On passe une fonction en tant que référence et non une chaîne de caractères (onClick={handleClick} et non onClick="handleClick()").
3. Il faut appeler event.preventDefault() pour annuler un comportement par défaut, comme empêcher la soumission d’un formulaire :

function Formulaire() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Formulaire soumis !");
  };

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

Passer des Paramètres à un Gestionnaire d’Événements

Si tu veux passer des paramètres à une fonction de gestion d’événements, voici comment faire :

function BoutonAvecParam() {
  const handleClick = (nom) => {
    alert(`Salut, ${nom} !`);
  };

  return <button onClick={() => handleClick("Ismail")}>Clique-moi</button>;
}

En utilisant une fonction fléchée, on peut appeler handleClick avec un argument spécifique.

Gestion des Événements avec le State

Une utilisation courante des événements est de mettre à jour l’état (state) d’un composant. Exemple :

import { useState } from "react";

function Compteur() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

Ici, chaque clic met à jour le state du composant, entraînant un re-render.

Mon Avis et Conseils

En manipulant les événements dans React, j’ai appris plusieurs bonnes pratiques :

Toujours utiliser une fonction de mise à jour du state basée sur l’état précédent pour éviter les erreurs de synchronisation :

setCount((prevCount) => prevCount + 1);

Éviter d’écrire du code complexe directement dans les gestionnaires d’événements, mieux vaut extraire la logique dans des fonctions séparées.

Limiter l’usage des fonctions fléchées dans les props pour éviter des re-renders inutiles sur de grands composants.

La semaine prochaine, je vais explorer les Hooks en React, en particulier useEffect et useContext.

Source:

• Matéu.sh, «How to Handle Events in React – Explained with Code Examples», freecodecamp, https://www.freecodecamp.org/news/how-to-handle-events-in-react-19/ (Page consulté le 14 février 2024)
• REACT, React (legacy documentation), https://legacy.reactjs.org/docs/handling-events.html (Page consulté le 14 février 2024)