Niveau intermédiaire : gestion des événements dans React

En tant que développeur de niveau intermédiaire, vous devez avoir une solide compréhension de la gestion des événements dans React, ce qui est essentiel pour créer des applications interactives et dynamiques. Ce guide couvrira les concepts avancés et les meilleures pratiques, notamment l'ajout de gestionnaires d'événements, la compréhension des événements synthétiques, la transmission d'arguments aux gestionnaires d'événements, la création d'événements personnalisés et l'exploitation de la délégation d'événements.

Gestion des événements

Ajout de gestionnaires d'événements dans JSX

Dans React, les gestionnaires d'événements peuvent être ajoutés directement dans JSX. Les gestionnaires d'événements sont des fonctions appelées lorsqu'un événement spécifique se produit, tel qu'un clic sur un bouton ou l'envoi d'un formulaire. L'ajout de gestionnaires d'événements dans JSX est similaire à la façon dont cela se fait en HTML standard, mais avec la syntaxe JSX de React.

Exemple d'ajout d'un gestionnaire d'événements :

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default App;

Dans cet exemple, la fonction handleClick est appelée à chaque fois que l'on clique sur le bouton. L'attribut onClick dans JSX est utilisé pour spécifier le gestionnaire d'événements.

Événements synthétiques

React utilise un système appelé événements synthétiques pour gérer les événements. Les événements synthétiques sont un wrapper multi-navigateur autour du système d'événements natif du navigateur. Cela garantit que les événements se comportent de manière cohérente sur les différents navigateurs.

Exemple d'événement synthétique :

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

Dans cet exemple, la fonction handleInputChange enregistre la valeur du champ de saisie chaque fois qu'elle change. Le paramètre event est un événement synthétique qui fournit des propriétés d'événement cohérentes dans tous les navigateurs.

Passer des arguments aux gestionnaires d'événements

Parfois, vous devez transmettre des arguments supplémentaires aux gestionnaires d'événements. Cela peut être fait en utilisant une fonction fléchée ou la méthode bind.

Exemple d'utilisation d'une fonction flèche :

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Exemple utilisant la méthode bind :

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Les deux méthodes vous permettent de transmettre des arguments supplémentaires à la fonction handleClick.

Gestion des événements personnalisés

Création d'événements personnalisés

Bien que les événements synthétiques de React couvrent la plupart des cas d'utilisation typiques, vous devrez peut-être créer des événements personnalisés pour des interactions plus complexes. Des événements personnalisés peuvent être créés et distribués à l'aide du constructeur CustomEvent et de la méthode dispatchEvent.

Exemple de création et de diffusion d'un événement personnalisé :

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

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

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

Dans cet exemple, un événement personnalisé nommé customEvent est créé et distribué lorsque vous cliquez sur le bouton. Le gestionnaire d'événements écoute l'événement personnalisé et affiche une alerte avec le message détaillé de l'événement.

Délégation d'événement dans React

La délégation d'événements est une technique dans laquelle un seul écouteur d'événement est utilisé pour gérer les événements de plusieurs éléments. Ceci est utile pour gérer efficacement les événements, notamment dans les listes ou les tableaux.

Exemple de délégation d'événement :

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

Dans cet exemple, un seul gestionnaire d'événements sur l'élément div gère les événements de clic pour tous les boutons. Le gestionnaire d'événements vérifie le event.target pour déterminer sur quel bouton vous avez cliqué et affiche une alerte en conséquence.

Meilleures pratiques pour la gestion des événements dans React

1. Utilisez judicieusement les gestionnaires d'événements : Évitez de créer de nouvelles fonctions de gestionnaire d'événements dans les méthodes de rendu, car cela peut entraîner des problèmes de performances. Au lieu de cela, définissez vos gestionnaires d'événements en dehors de la méthode de rendu.

2. Empêcher le comportement par défaut : Utilisez event.preventDefault() pour empêcher le comportement par défaut des événements lorsque cela est nécessaire, tels que les soumissions de formulaires ou les clics sur des balises d'ancrage.
   

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;

1. Arrêter la propagation : Utilisez event.stopPropagation() pour arrêter la propagation des événements vers les éléments parents lorsque cela est nécessaire.

   const handleButtonClick = (event) => {
     event.stopPropagation();
     // Handle button click
   };

   return <button onClick={handleButtonClick}>Click Me</button>;

1. Anti-rebond et limitation : Utilisez des techniques d'anti-rebond ou de limitation pour limiter le nombre de fois qu'un gestionnaire d'événements est appelé pour des événements à haute fréquence comme le défilement ou le redimensionnement.

2. Nettoyer les écouteurs d'événements : Lorsque vous ajoutez des écouteurs d'événements directement aux éléments DOM (en particulier dans les composants de classe ou les hooks), assurez-vous de les nettoyer pour éviter les fuites de mémoire.
   

   useEffect(() => {
     const handleResize = () => {
       // Handle resize
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

Conclusion

La gestion des événements dans React est essentielle pour créer des applications interactives. En comprenant comment ajouter des gestionnaires d'événements, utiliser des événements synthétiques, transmettre des arguments aux gestionnaires d'événements, créer des événements personnalisés et tirer parti de la délégation d'événements, vous pouvez créer des applications React plus dynamiques et efficaces. La mise en œuvre des meilleures pratiques garantit que vos applications restent performantes et maintenables à mesure qu’elles gagnent en complexité. En tant que développeur de niveau intermédiaire, la maîtrise de ces techniques améliorera votre capacité à gérer des interactions complexes et contribuera à la réussite de vos projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!