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怎么实现点击事件的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏