首先,页面是这样婶的:
点击上面的分享按钮后:
我想要的效果是:点击分享框外的任何地方,弹出框消失,恢复原样。
首先想到的方法是:
componentDidMount(){
document.onclick = this.onblur
}
onblur =() => {
this.setState({
showMask:false, //蒙板消失
showPop:false //分享框消失
})
}
这样的结果是:
点击任何地方两者都消失,包括点击分享按钮(微信和朋友圈ICON)
所以经过网上资料的启发,又换了个思路:
点击蒙板,分享框消失。
closePop =() => {
this.setState({
showMask:false,
showPop:false
})
}
render(){
return(
<div>
...
<div style={styles.maskLayer} onClick={this.closePop}></div>
...
</div>
)
}
如此这般,甚好。