我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQueryclosest（）用于查看单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子项，因此不被视为在组件之外。
因此，在我的组件中，我想将一个单击处理程序附加到窗口。当处理程序启动时，我需要将目标与组件的dom子级进行比较。
click事件包含类似“path”的财产，它似乎保存了事件经过的dom路径。我不知道该比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在了一个聪明的效用函数中。。。不
当前回答
我被困在同一个问题上。我参加这里的聚会有点晚了，但对我来说，这是一个非常好的解决方案。希望这对其他人有帮助。您需要从react dom导入findDOMNode
import ReactDOM from 'react-dom';
// ... ✂
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}
handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.setState({
visible: false
});
}
}
反应挂钩法（16.8+）
您可以创建一个名为useComponentVisible的可重用钩子。
import { useState, useEffect, useRef } from 'react';
export default function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
}, []);
return { ref, isComponentVisible, setIsComponentVisible };
}
然后在组件中添加功能以执行以下操作：
const DropDown = () => {
const { ref, isComponentVisible } = useComponentVisible(true);
return (
<div ref={ref}>
{isComponentVisible && (<p>Dropdown Component</p>)}
</div>
);
}
在这里查找codesandbox示例。
其他回答
MUI有一个小组件来解决这个问题：https://mui.com/base/react-click-away-listener/它的重量低于1kB，支持移动、IE 11和门户网站。
componentWillMount(){
document.addEventListener('mousedown', this.handleClickOutside)
}
handleClickOutside(event) {
if(event.path[0].id !== 'your-button'){
this.setState({showWhatever: false})
}
}
事件路径[0]是最后单击的项目
所有提出的解决方案都假设可以将事件添加到文档中，并依赖于本机方法.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} />;
}
import { RefObject, useEffect } from 'react';
const useClickOutside = <T extends HTMLElement>(ref: RefObject<T>, fn: () => void) => {
useEffect(() => {
const element = ref?.current;
function handleClickOutside(event: Event) {
if (element && !element.contains(event.target as Node | null)) {
fn();
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref]);
};
export default useClickOutside;
这是最适合我制作下拉菜单的方法：
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>
)
}
