首先，頁面是這樣?jì)鸬模?/p>

image.png

點(diǎn)擊上面的分享按鈕后：

image.png

我想要的效果是：點(diǎn)擊分享框外的任何地方，彈出框消失，恢復(fù)原樣。

首先想到的方法是：

componentDidMount(){
    document.onclick = this.onblur
  }

onblur =() => {
    this.setState({
      showMask:false, //蒙板消失
      showPop:false //分享框消失
    })
  }

這樣的結(jié)果是：
點(diǎn)擊任何地方兩者都消失，包括點(diǎn)擊分享按鈕（微信和朋友圈ICON）

所以經(jīng)過網(wǎng)上資料的啟發(fā)，又換了個(gè)思路：
點(diǎn)擊蒙板，分享框消失。

closePop =() => {
    this.setState({
      showMask:false,
      showPop:false
    })
  }
render(){
  return(
    <div>
      ...
      <div style={styles.maskLayer} onClick={this.closePop}></div>
      ...
    </div>
  )
}

如此這般，甚好。