我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
要使“焦点”解决方案适用于带有事件侦听器的下拉列表，您可以使用onMouseDown事件而不是onClick来添加它们。这样，事件将启动，之后弹出窗口将关闭，如下所示：
<TogglePopupButton
onClick = { this.toggleDropup }
tabIndex = '0'
onBlur = { this.closeDropup }
/>
{ this.state.isOpenedDropup &&
<ul className = { dropupList }>
{ this.props.listItems.map((item, i) => (
<li
key = { i }
onMouseDown = { item.eventHandler }
>
{ item.itemName}
</li>
))}
</ul>
}
其他回答
如果您想使用这个功能已经存在的一个小组件（466字节gzip），那么您可以查看这个库react outclick。
该库的好处在于它还允许您检测组件外部和另一个组件内部的单击。它还支持检测其他类型的事件。
聚会晚了一点，但我在使用React时遇到了一些问题。选择下拉菜单，因为单击的选项将不再包含在我希望在onClick被激发时单击的父项中。
我通过以下方式解决了这个问题：
componentDidMount() {
document.addEventListener('mousedown', this.onClick );
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.onClick );
}
onClick = (event) => {
if(!event.path.includes(this.detectOutsideClicksDiv)) {
// Do stuff here
}
}
这里的其他答案都不适合我。我试图在模糊上隐藏一个弹出窗口，但由于内容是绝对定位的，所以即使单击内部内容，onBlur也会启动。
以下是一个对我来说行之有效的方法：
// Inside the component:
onBlur(event) {
// currentTarget refers to this component.
// relatedTarget refers to the element where the user clicked (or focused) which
// triggered this event.
// So in effect, this condition checks if the user clicked outside the component.
if (!event.currentTarget.contains(event.relatedTarget)) {
// do your thing.
}
},
希望这有帮助。
你可以用一个简单的方法来解决你的问题，我向你展示：
....
const [dropDwonStatus , setDropDownStatus] = useState(false)
const openCloseDropDown = () =>{
setDropDownStatus(prev => !prev)
}
const closeDropDown = ()=> {
if(dropDwonStatus){
setDropDownStatus(false)
}
}
.
.
.
<parent onClick={closeDropDown}>
<child onClick={openCloseDropDown} />
</parent>
这对我有用，祝你好运；）
所有提出的解决方案都假设可以将事件添加到文档中，并依赖于本机方法.contains（）来区分事件是在当前组件内部还是外部触发的
ref.current.contains(event.target)
但这在React中并不总是有效的。事实上，在React中，React.createPortal API允许从一个组件中指定一个新的真实父组件，JSX在该组件中被呈现，但同时，事件冒泡被模拟为组件在声明的位置呈现（即React.cCreatePortal被调用的位置）。
这是通过将所有事件附加到应用程序根元素并在Javascript中模拟事件来实现的。
因此，在这种情况下，所提出的解决方案被打破了，因为在门户元素内部的单击，对于标准HTML来说，在当前元素之外，实际上应该像在内部一样进行处理。
所以我重写了这个问题的一个注释中提出的解决方案，并对其进行了重构以使用功能组件。这也适用于一个或多个嵌套门户。
export default function OutsideClickDetector({onOutsideClick, Component ='div', ...props} : OutsideClickDetectorProps) {
const isClickInside = useRef<boolean>(false);
const onMouseDown = () => {
isClickInside.current = true;
};
const handleBodyClick = useCallback((e) => {
if(!isClickInside.current) {
onOutsideClick?.(e);
}
isClickInside.current = false;
}, [isClickInside, onOutsideClick]);
useEffect(() => {
document.addEventListener('mousedown', handleBodyClick);
return () => document.removeEventListener('mousedown', handleBodyClick);
});
return <Component onMouseDown={onMouseDown} onMouseUp={() => isClickInside.current = false}{...props} />;
}
