检测React组件外部的单击
检测React组件外部的单击
提问于 2015-09-14 02:34:01
我正在寻找一种方法来检测组件外部是否发生了单击事件，如此article中所述。jQuery event ()用于查看来自单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项，则单击事件属于其中一个子事件，因此不会被视为在组件外部。
因此，在我的组件中，我希望将一个单击处理程序附加到窗口。当处理程序触发时，我需要将目标与我的组件的dom子级进行比较。
单击事件包含像" path“这样的属性，它似乎保存了事件所经过的dom路径。我不确定要比较什么，或者如何最好地遍历它，我想肯定有人已经把它放在一个聪明的实用函数中了……不是吗？
回答 32
Stack Overflow用户
发布于 2017-01-11 09:51:14
在尝试了许多方法之后，我决定使用github.com/Pomax/react-onclickoutside，因为它非常完整。
我通过npm安装了模块，并将其导入到我的组件中：
import onClickOutside from 'react-onclickoutside'然后，在我的组件类中，我定义了handleClickOutside方法：
handleClickOutside = () => {
console.log('onClickOutside() method called')
}在导出组件时，我将其包装在onClickOutside()中
export default onClickOutside(NameOfComponent)就这样。
Stack Overflow用户
发布于 2017-06-06 06:45:46
这里的其他答案对我都不起作用。我试图在onBlur上隐藏一个弹出窗口，但由于内容是绝对定位的，所以内部内容的点击也会触发blur。
以下是一种对我确实有效的方法：
// 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.
}
},希望这能有所帮助。
Stack Overflow用户
发布于 2021-01-21 13:15:56
Ez方式..。
const componentRef = useRef();
useEffect(() => {
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
function handleClick(e: any) {
if(componentRef && componentRef.current){
const ref: any = componentRef.current
if(!ref.contains(e.target)){
// put your action here
}
}
}
}, []);然后把ref放在你的组件上
<div ref={componentRef as any}> My Component </div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32553158
复制相关文章
相似问题
腾讯云开发者
