react实现点击空白处隐藏弹出元素

作者: MJ 分类: react 发布时间: 2019-03-15 16:48

react经常会遇到这样的需求:点击某处按钮或者其他,弹出某一个元素A,然后点击这个元素A之外的地方可以隐藏这个弹出的元素A。

实现方式有两种:

1:就是在这个弹出的元素下放一个透明的遮罩层,然后点击遮罩层的时候设置元素A及遮罩层隐藏即可。

2:利用e.nativeEvent.stopImmediatePropagation()即可

componentDidMount(){
        document.addEventListener('click', this.hideMenu);
}
hideMenu = () => {
    this.setState({
        tShowFlag: false
    })
}
showTips(e){
    this.setState({
        tShowFlag:true
    });
    e.nativeEvent.stopImmediatePropagation();
}

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注