Gestion des événements React

Introduction

En développement web, la gestion des événements (event handling) est le processus de réponse aux actions de l'utilisateur telles que les clics, les pressions de touches ou les mouvements de souris. React offre une manière simple et déclarative de gérer ces événements, rendant vos applications interactives.

Le système d'événements de React est un wrapper autour du système d'événements natif du navigateur. Les noms des événements sont écrits en camelCase, par exemple onClick au lieu de onclick. Vous passez une fonction comme gestionnaire d'événements, plutôt qu'une chaîne de caractères.

Dans ce lab, vous apprendrez les bases de la gestion des événements dans React. Vous commencerez avec un simple bouton et ajouterez progressivement des fonctionnalités pour gérer les événements de clic, accéder aux données de l'événement et contrôler le comportement par défaut du navigateur.

À la fin de ce lab, vous serez capable de :

• Attacher un gestionnaire d'événements onClick à un bouton.
• Définir une fonction gestionnaire au sein d'un composant.
• Passer correctement la fonction gestionnaire à l'attribut d'événement.
• Accéder à l'objet événement pour obtenir des informations sur l'événement.
• Empêcher l'action par défaut du navigateur en utilisant event.preventDefault().

Ajouter l'attribut onClick à l'élément button

Dans cette étape, vous commencerez par configurer l'environnement de développement, puis vous ajouterez un attribut onClick à un élément de bouton. C'est la première étape pour rendre un élément interactif dans React.

Tout d'abord, naviguons vers le répertoire du projet, installons les dépendances nécessaires et démarrons le serveur de développement.

Ouvrez un terminal dans le WebIDE et exécutez les commandes suivantes une par une :

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

Après avoir exécuté npm run dev, vous verrez une sortie indiquant que le serveur de développement est en cours d'exécution. Vous pouvez maintenant visualiser votre application en passant à l'onglet Web 8080 dans l'interface LabEx. Vous devriez voir un simple bouton "Click me".

Maintenant, ajoutons le gestionnaire d'événements. Ouvrez le fichier src/App.jsx depuis l'explorateur de fichiers sur le côté gauche du WebIDE.

Votre fichier src/App.jsx ressemble actuellement à ceci :

function App() {
  return <button>Click me</button>;
}

export default App;

Pour répondre à un clic, vous devez ajouter l'attribut onClick à l'élément <button>. Dans React, les attributs d'événements sont écrits en camelCase. Pour l'instant, nous y passerons une fonction fléchée inline vide.

Modifiez l'élément <button> dans src/App.jsx comme indiqué ci-dessous :

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Enregistrez le fichier. Bien que cliquer sur le bouton ne fasse encore rien de visible, vous lui avez correctement attaché un écouteur d'événements.

Définir la fonction de gestionnaire à l'intérieur du composant

Dans cette étape, vous allez définir une fonction dédiée à l'intérieur de votre composant pour gérer l'événement de clic. C'est une pratique courante qui permet de garder votre JSX propre et votre logique organisée.

Au lieu d'écrire la logique directement dans l'attribut onClick du JSX, il est préférable de définir une fonction séparée. Créons une fonction nommée handleClick.

Dans votre fichier src/App.jsx, définissez la fonction handleClick à l'intérieur du composant App, avant l'instruction return. Pour l'instant, cette fonction affichera simplement un message dans la console.

Mettez à jour votre fichier src/App.jsx avec le code suivant :

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

À ce stade, vous avez défini la fonction handleClick, mais elle n'est pas encore connectée à l'événement onClick du bouton. Dans l'étape suivante, vous apprendrez comment passer cette fonction à l'attribut onClick.

Passer le gestionnaire à onClick sans parenthèses

Dans cette étape, vous allez connecter la fonction handleClick que vous avez définie à l'événement onClick du bouton. Il est très important de passer la référence de la fonction elle-même, et non le résultat de l'appel de la fonction.

Pour utiliser votre fonction handleClick comme gestionnaire d'événements, vous devez la passer à l'attribut onClick entre accolades {}.

Modifiez l'élément <button> dans src/App.jsx pour passer handleClick à onClick :

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Notez que nous écrivons onClick={handleClick}, et non onClick={handleClick()}.

• onClick={handleClick} passe la fonction elle-même. React appellera cette fonction lorsque le bouton sera cliqué.
• onClick={handleClick()} appellerait la fonction immédiatement lors du rendu du composant et passerait sa valeur de retour (qui est undefined) à onClick. C'est une erreur courante chez les débutants.

Maintenant, testons-le.

1. Enregistrez le fichier src/App.jsx.
2. Accédez à l'onglet Web 8080.
3. Ouvrez la console du développeur du navigateur. Vous pouvez le faire en faisant un clic droit sur la page, en sélectionnant "Inspecter" (ou "Inspect"), puis en cliquant sur l'onglet "Console".
4. Cliquez sur le bouton "Click me".

Vous devriez voir le message "Button was clicked!" apparaître dans la console chaque fois que vous cliquez sur le bouton.

Accéder à l'objet event dans le paramètre du gestionnaire

Dans cette étape, vous apprendrez comment accéder à l'objet événement que React passe automatiquement à votre gestionnaire d'événements. Cet objet contient des informations utiles sur l'interaction de l'utilisateur.

React passe un objet "événement synthétique" (synthetic event) à chaque gestionnaire d'événements comme premier argument. Cet objet est un wrapper multi-navigateurs autour de l'événement natif du navigateur, fournissant une API cohérente.

Pour y accéder, vous devez ajouter un paramètre à votre fonction handleClick. Il est conventionnellement nommé event ou e. Modifions la fonction pour accepter ce paramètre et l'afficher dans la console.

Mettez à jour votre fichier src/App.jsx :

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Maintenant, enregistrez le fichier et retournez à l'onglet Web 8080. Assurez-vous que votre console de développeur est toujours ouverte. Lorsque vous cliquerez sur le bouton, vous ne verrez plus une simple chaîne de caractères. Au lieu de cela, vous verrez un objet SyntheticBaseEvent affiché dans la console.

Vous pouvez développer cet objet dans la console pour inspecter ses propriétés. Par exemple, vous pouvez trouver :

• event.type : Le type d'événement (par exemple, "click").
• event.target : L'élément DOM qui a déclenché l'événement (le <button>).

Cet objet événement est puissant et vous permet de lire des informations et de contrôler le comportement de l'événement.

Empêcher le comportement par défaut avec event.preventDefault()

Dans cette étape, vous apprendrez comment empêcher le comportement par défaut du navigateur associé à un événement. C'est une exigence courante, en particulier lors de la gestion des soumissions de formulaires.

Certains événements du navigateur ont une action par défaut. Par exemple, cliquer sur un lien navigue vers une nouvelle page, et cliquer sur un bouton de soumission à l'intérieur d'un <form> soumet le formulaire, ce qui entraîne généralement un rechargement de la page.

Pour démontrer cela, encapsulons notre bouton dans un élément <form>. Par défaut, cliquer sur un bouton à l'intérieur d'un formulaire déclenchera une soumission du formulaire.

Mettez à jour votre fichier src/App.jsx pour inclure une balise <form> :

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Si vous enregistrez ceci et cliquez sur le bouton maintenant, vous remarquerez que la page se recharge, et vous pourriez brièvement voir le log de la console avant qu'il ne disparaisse. C'est le comportement de soumission par défaut du formulaire.

Pour empêcher cela, vous pouvez appeler event.preventDefault() à l'intérieur de votre gestionnaire. Cette méthode indique au navigateur de ne pas effectuer son action par défaut.

Modifiez la fonction handleClick pour appeler event.preventDefault() :

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Enregistrez le fichier et réessayez. Maintenant, lorsque vous cliquerez sur le bouton dans l'onglet Web 8080, la page ne se rechargera pas. Vous verrez le message "Form submission prevented!" s'afficher de manière cohérente dans la console. Vous avez réussi à prendre le contrôle du comportement de l'événement.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez appris les concepts fondamentaux de la gestion des événements dans React.

Dans ce laboratoire, vous avez pratiqué comment :

• Utiliser l'attribut onClick en JSX pour écouter les clics de l'utilisateur.
• Définir des fonctions de gestion d'événements à l'intérieur de vos composants pour organiser votre code.
• Passer correctement une référence de fonction à une prop de gestionnaire d'événements, en évitant le piège courant d'appeler la fonction lors du rendu.
• Accéder à l'objet événement synthétique que React fournit, qui contient des informations précieuses sur l'interaction de l'utilisateur.
• Utiliser event.preventDefault() pour arrêter l'action par défaut du navigateur, vous donnant un contrôle total sur l'expérience utilisateur.

Ces compétences sont essentielles pour construire des interfaces utilisateur interactives et dynamiques avec React. Vous pouvez appliquer ces mêmes principes pour gérer d'autres événements comme onChange pour les entrées, onMouseOver pour les effets de survol, et bien d'autres.