首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检测React组件外部的单击

检测React组件外部的单击
EN

Stack Overflow用户
提问于 2015-09-14 02:34:01
回答 32查看 535.5K关注 0票数 669

我正在寻找一种方法来检测组件外部是否发生了单击事件,如此article中所述。jQuery event ()用于查看来自单击事件的目标是否将dom元素作为其父元素之一。如果存在匹配项,则单击事件属于其中一个子事件,因此不会被视为在组件外部。

因此,在我的组件中,我希望将一个单击处理程序附加到窗口。当处理程序触发时,我需要将目标与我的组件的dom子级进行比较。

单击事件包含像" path“这样的属性,它似乎保存了事件所经过的dom路径。我不确定要比较什么,或者如何最好地遍历它,我想肯定有人已经把它放在一个聪明的实用函数中了……不是吗?

EN

回答 32

Stack Overflow用户

发布于 2017-01-11 09:51:14

在尝试了许多方法之后,我决定使用github.com/Pomax/react-onclickoutside,因为它非常完整。

我通过npm安装了模块,并将其导入到我的组件中:

代码语言:javascript
复制
import onClickOutside from 'react-onclickoutside'

然后,在我的组件类中,我定义了handleClickOutside方法:

代码语言:javascript
复制
handleClickOutside = () => {
  console.log('onClickOutside() method called')
}

在导出组件时,我将其包装在onClickOutside()

代码语言:javascript
复制
export default onClickOutside(NameOfComponent)

就这样。

票数 107
EN

Stack Overflow用户

发布于 2017-06-06 06:45:46

这里的其他答案对我都不起作用。我试图在onBlur上隐藏一个弹出窗口,但由于内容是绝对定位的,所以内部内容的点击也会触发blur。

以下是一种对我确实有效的方法:

代码语言:javascript
复制
// 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.
    }
},

希望这能有所帮助。

票数 45
EN

Stack Overflow用户

发布于 2021-01-21 13:15:56

Ez方式..。

代码语言:javascript
复制
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放在你的组件上

代码语言:javascript
复制
<div ref={componentRef as any}> My Component </div>
票数 20
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32553158

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档