React の useClickOutside フック

はじめに

この実験では、React で useClickOutside フックを使用して、特定のコンポーネントの外で発生するクリックイベントを処理する方法を学びます。このカスタムフックを使用することで、ユーザーが特定のコンポーネントの外でクリックしたときを簡単に検出し、そのイベントに基づいてアクションを実行できます。実験が終了するとき、React アプリケーションでこのフックを使用して、よりインタラクティブでユーザーフレンドリーなコンポーネントを作成する方法をより深く理解しているでしょう。

Skills Graph

React useClickOutside フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加する必要があります。

このコードは、ラップされたコンポーネントの外でのクリックイベントを処理します。ref と callback を受け取って click イベントを処理するカスタムフックを作成することで機能します。useEffect() フックは click イベントを追加およびクリーンアップするために使用され、useRef() フックはクリックコンポーネント用の ref を作成して 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")} />
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは React useClickOutside フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。