React冒泡和阻止冒泡的使用方法

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
constructor(props){
super(props);

this.state = {
count:0,
    }
  }

handleClick(e){
this.setState({count:++this.state.count});
  }
render(){
return(
<div ref="test">
<p>{this.state.count}</p>
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
    )
  }

componentDidMount() {
document.body.addEventListener('click',e=>{
// 通過(guò)e.target判斷阻止冒泡
      if(e.target&&e.target.matches('a')){
return;
      }
console.log('body');
    })
  }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

 componentDidMount() {
  document.addEventListener('click', this.hideDrawer);
 }

 componentWillUnmount() {
  document.removeEventListener('click', this.hideDrawer);
 }

 hideDrawer = e => {
  const { closeDrawer } = this.props;
  // 找到不需要關(guān)閉的dom 一級(jí)菜單
  const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
  // 找到不需要關(guān)閉的dom   Drawer
  const drawerContent = document.querySelector('#menuDrawer');
  // 判斷當(dāng)前點(diǎn)擊的dom對(duì)象有沒(méi)有包含在目標(biāo)dom中
  const isHave = Array.from(tabContent).some(item => item.contains(e.target));
  // 不包含則關(guān)閉Drawer 包含就走其他的業(yè)務(wù)邏輯了
  if (tabContent !== null && !(isHave || drawerContent.contains(e.target))) {
   closeDrawer();
  }
 };