简介
在本实验中,我们将学习如何在 React 中使用 useClickOutside
钩子来处理在特定组件外部发生的点击事件。这个自定义钩子使我们能够轻松检测用户何时在特定组件外部点击,并根据该事件执行一个操作。在本实验结束时,你将更好地理解如何使用这个钩子在你的 React 应用程序中创建更具交互性和用户友好性的组件。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何在 React 中使用 useClickOutside
钩子来处理在特定组件外部发生的点击事件。这个自定义钩子使我们能够轻松检测用户何时在特定组件外部点击,并根据该事件执行一个操作。在本实验结束时,你将更好地理解如何使用这个钩子在你的 React 应用程序中创建更具交互性和用户友好性的组件。
虚拟机中已提供
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 中练习更多实验来提升你的技能。