React 的 useClickOutside 钩子

ReactReactBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StylingGroup(["Styling"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StylingGroup -.-> react/css_in_react("CSS in React") subgraph Lab Skills react/jsx -.-> lab-38373{{"React 的 useClickOutside 钩子"}} react/event_handling -.-> lab-38373{{"React 的 useClickOutside 钩子"}} react/hooks -.-> lab-38373{{"React 的 useClickOutside 钩子"}} react/css_in_react -.-> lab-38373{{"React 的 useClickOutside 钩子"}} end

React useClickOutside 钩子

虚拟机中已提供 index.htmlscript.js。一般来说,你只需在 script.jsstyle.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 中练习更多实验来提升你的技能。