React useClickInside 钩子

简介

在本实验中，我们将学习如何创建一个名为 useClickInside 的自定义 React 钩子。这个钩子将处理在包裹组件内部的点击事件，并触发一个回调函数。我们将使用 useEffect() 和 useRef() 钩子来附加和清理 click 事件。在本实验结束时，你将对如何在 React 中创建自定义钩子和处理事件有更深入的理解。

React useClickInside 钩子

虚拟机中已经提供了 index.html 和 script.js。一般来说，你只需要在 script.js 和 style.css 中添加代码。

要处理组件内部的点击事件，你可以创建一个名为 useClickInside 的自定义钩子，它接受一个 ref 和一个 callback。使用 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 中练习更多实验来提升你的技能。