React の useClickInside フック

はじめに

この実験では、useClickInside と呼ばれるカスタム React フックを作成する方法を学びます。このフックは、ラップされたコンポーネント内でのクリックイベントを処理し、コールバック関数をトリガーします。useEffect() と useRef() フックを使用して、click イベントを追加およびクリーンアップします。この実験が終了するとき、React でカスタムフックを作成し、イベントを処理する方法をより深く理解しているでしょう。

Skills Graph

React useClickInside フック

VM 内には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

コンポーネント内のクリックイベントを処理するには、ref と callback を受け取る useClickInside と呼ばれるカスタムフックを作成します。useEffect() フックを使用して click イベントを追加およびクリーンアップし、useRef() フックを使用してクリックコンポーネント用の ref を作成し、それを useClickInside フックに渡します。以下がコードです。

const useClickInside = (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);
    };
  }, [ref, callback]);
};

このフックをコンポーネントで使用するには、次のようにします。

const ClickBox = ({ onClickInside }) => {
  const clickRef = React.useRef();
  useClickInside(clickRef, onClickInside);

  return (
    <div
      className="click-box"
      ref={clickRef}
      style={{
        border: "2px dashed orangered",
        height: 200,
        width: 400,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <p>Click inside this element</p>
    </div>
  );
};

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

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

まとめ

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