react实现点击空白处隐藏弹出元素
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();
}
欢迎关注小程序,感谢您的支持!