首页 > 其他 > 详细

react判断点击位置是否为组件内,实现点击外部触发组件内事件

时间:2019-08-03 01:11:15      阅读:271      评论:0      收藏:0      [点我收藏+]

1.导入

import {findDOMNode} from ‘react-dom‘
2.绑定ref
<div  ref="refTest"
</div>

 

3.绑定监听事件
//监听外部click
    componentDidMount() {
        document.addEventListener(‘mousedown‘, (e)=>this.handleClickOutside(e), false);
      }
      componentWillUnmount() {
        document.removeEventListener(‘mousedown‘, (e)=>this.handleClickOutside(e), false);
      }
      handleClickOutside(e) {
        const target = e.target;
        console.log(target);
        console.log(this);
        // 组件已挂载且事件触发对象不在div内
        let result=findDOMNode(this.refs.refTest).contains(e.target);
        if( !result) {
            console.log("ssscs");
            this.setState({
                ulShow:false
            });
        }  
      }

 

react判断点击位置是否为组件内,实现点击外部触发组件内事件

原文:https://www.cnblogs.com/ives/p/11291769.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!