react 点击其他区域关闭弹出框

首先，页面是这样婶的：

image.png

点击上面的分享按钮后：

image.png

我想要的效果是：点击分享框外的任何地方，弹出框消失，恢复原样。

首先想到的方法是：

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>
  )
}

如此这般，甚好。