我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
import React, { useState, useEffect, useRef } from "react";
const YourComponent: React.FC<ComponentProps> = (props) => {
const ref = useRef<HTMLDivElement | null>(null);
const [myState, setMyState] = useState(false);
useEffect(() => {
const listener = (event: MouseEvent) => {
// we have to add some logic to decide whether or not a click event is inside of this editor
// if user clicks on inside the div we dont want to setState
// we add ref to div to figure out whether or not a user is clicking inside this div to determine whether or not event.target is inside the div
if (
ref.current &&
event.target &&
// contains is expect other: Node | null
ref.current.contains(event.target as Node)
) {
return;
}
// if we are outside
setMyState(false);
};
// anytime user clics anywhere on the dom, that click event will bubble up into our body element
// without { capture: true } it might not work
document.addEventListener("click", listener, { capture: true });
return () => {
document.removeEventListener("click", listener, { capture: true });
};
}, []);
return (
<div ref={ref}>
....
</div>
);
};
其他回答
我有一个类似的用例，我必须开发一个自定义下拉菜单。当用户在外面单击时，它应该自动关闭。以下是最近的React Hooks实现-
从“react”导入｛useEffect，useRef，useState｝；导出常量应用程序=（）=>{const-ref=useRef（）；const[isMenuOpen，setIsMenuOpen]=useState（false）；使用效果（（）=>{常量checkIfClickedOutside=（e）=>{//如果菜单是打开的并且点击的目标不在菜单内，//然后关闭菜单if（isMenuOpen&&ref.current&&！ref.current.contents（e.target））{setIsMenuOpen（false）；}};document.addEventListener（“mousedown”，checkIfClickedOutside）；返回（）=>{//清理事件侦听器document.removeEventListener（“mousedown”，checkIfClickedOutside）；};}，[isMenuOpen]）；返回(＜div className＝“wrapper”ref＝｛ref｝＞<按钮className=“button”onClick={（）=>setIsMenuOpen（（oldState）=>！oldState）}>单击我</按钮>｛isMenuOpen&&(<ul className=“list”><li className=“list item”>下拉选项1</li><li className=“list item”>下拉选项2</li><li className=“list item”>下拉选项3</li><li className=“list item”>下拉选项4</li></ul>)}</div>);}
如果您想使用这个功能已经存在的一个小组件（466字节gzip），那么您可以查看这个库react outclick。
该库的好处在于它还允许您检测组件外部和另一个组件内部的单击。它还支持检测其他类型的事件。
我对所有其他答案最担心的是必须从根/父级向下过滤单击事件。我发现最简单的方法是简单地设置一个具有位置的同级元素：fixed，下拉列表后面的z索引1，并处理同一组件内固定元素上的单击事件。将所有内容集中到给定组件。
示例代码
#HTML
<div className="parent">
<div className={`dropdown ${this.state.open ? open : ''}`}>
...content
</div>
<div className="outer-handler" onClick={() => this.setState({open: false})}>
</div>
</div>
#SASS
.dropdown {
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
&.open {
display: block;
}
}
.outer-handler {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 99;
display: none;
&.open {
display: block;
}
}
这是最适合我制作下拉菜单的方法：
handleClick = () => {
document.getElementById("myDrop").classList.toggle("showing");
}
render() {
return (
<div className="courses">
<div class="dropdownBody">
<button onClick={this.handleClick} onBlur={this.handleClick} class="dropbtn">Dropdown</button>
<div id="myDrop" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</div>
)
}
带打字稿函数Tooltip（）：ReactElement{const[show，setShow]=useState（false）；const-ref=useRef<HTMLDivElement>（null）；使用效果（（）=>{函数handleClickOutside（事件：MouseEvent）：void{if（ref.current&&！ref.current.includes（event.target作为节点））{setShow（false）；}}//绑定事件侦听器document.addEventListener（'mouseown'，handleClickOutside）；返回（）=>{//清理时取消绑定事件侦听器document.removeEventListener（'usedown'，handleClickOutside）；};});返回(＜div ref＝｛ref｝＞＜/div＞) }
