React 的 useClickOutside 钩子

简介

在本实验中，我们将学习如何在 React 中使用 useClickOutside 钩子来处理在特定组件外部发生的点击事件。这个自定义钩子使我们能够轻松检测用户何时在特定组件外部点击，并根据该事件执行一个操作。在本实验结束时，你将更好地理解如何使用这个钩子在你的 React 应用程序中创建更具交互性和用户友好性的组件。

Skills Graph

React useClickOutside 钩子

虚拟机中已提供 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 中练习更多实验来提升你的技能。