react怎么实现点击事件

react 实现点击div外部触发事件

大概思路是,为document绑定一个点击事件,判断事件触发对象(e.target)是否是 or 在指定div内部。

首先需要了解两个知识点:

React ref属性

Node.contains()

利用ref属性获取div节点

constructor(){
    this.divElement = null;
}
 
render() {
    return(
        <div ref={ node => this.divElement = node}><div/>
    )
}

document添加点击事件

componentDidMount() {
        document.addEventListener('click', this.outDivClickHandler);   
    }

卸载document点击事件

componentWillUnmount() {
        document.removeEventListener('click', this.outDivClickHandler);
    }

利用Node.contains()判断触发对象

outDivClickHandler(e) {
        const target = e.target;
        // 组件已挂载且事件触发对象不在div内
        if( this.divElement  && target !== this.menu && !this.divElement.contains(target)) {
 
            //do...
 
        }  
    }

更多相关技术文章,请访问HTML中文网

以上就是react怎么实现点击事件的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    扬声器属性级别设置|扬声器属性高级

    扬声器属性级别设置|扬声器属性高级,,1. 扬声器属性高级选择“高级”标签试试,不行的话,说明系统有问题了,直接换个验证过的系统盘重装系统就

    cad怎么设置节点|CAD怎么加节点

    cad怎么设置节点|CAD怎么加节点,,1. CAD怎么加节点天正CAD软件画节点的方法:1、在打开的软件中点击左侧工具栏中的图块图案-通用图库。2、

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    90后瓶门事件图片

    90后瓶门事件图片,,现在孩子们还太早,有些女孩子总是在门口等一会儿,最近发生了一次酒瓶门事件。 近日,山东一家寄宿学校的一名女生带着一瓶

    快捷键打开软件|快捷键打开软件属性

    快捷键打开软件|快捷键打开软件属性,,快捷键打开软件属性1.首先打开PS,鼠标左键单击“编辑”;2.在弹出的窗口找“键盘快捷键”,如果没有点击

    海龙节点快捷键|海龙工具快捷键

    海龙节点快捷键|海龙工具快捷键,,1. 海龙工具快捷键惠普笔记本电脑的优点:1、 品牌:这年头买任何东西都要涉及这样一个问题,很多人购买东西都

    Win8与ARP攻击的电脑的MAC地址绑定

    Win8与ARP攻击的电脑的MAC地址绑定,,评论:有时用户会使用P2P软件通过ARP攻击其他计算机,以降低其他用户的速度。尽管Win8有没有好的应对策略