React useClickOutside Hook

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser le crochet useClickOutside en React pour gérer les événements de clic qui se produisent en dehors d'un composant spécifique. Ce crochet personnalisé nous permet de détecter facilement lorsqu'un utilisateur clique en dehors d'un composant spécifique et d'effectuer une action en fonction de cet événement. À la fin du laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser ce crochet pour créer des composants plus interactifs et conviviaux dans vos applications React.

Skills Graph

React useClickOutside Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Ce code gère l'événement de clic en dehors d'un composant encapsulé. Il fonctionne en créant un crochet personnalisé qui prend une ref et une callback pour gérer l'événement click. Le crochet useEffect() est utilisé pour ajouter et nettoyer l'événement click, tandis que le crochet useRef() est utilisé pour créer une ref pour le composant de clic et la passer au crochet useClickOutside.

const useClickOutside = (ref, callback) => {
  const handleClick = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };
  React.useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => {
      document.removeEventListener("click", handleClick);
    };
  });
};

const ClickBox = ({ onClickOutside }) => {
  const clickRef = React.useRef();
  useClickOutside(clickRef, onClickOutside);
  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: "2px dashed orangered",
        height: 200,
        width: 400,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <p>Click out of this element</p>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ClickBox onClickOutside={() => alert("click outside")} />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le crochet React useClickOutside. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.