Antd 于document绑定click事件，如何阻止其对Select组件的（冒泡）影响？

Question

如题，我的操作流程如下：

1、点击编辑按钮,切换界面，点击select组件触发onFocus事件。

2、点一下document,便失去焦点了

而实际上，受到document绑定的click事件影响，它现在是这样的：

1、点击编辑按钮，触发界面切换，然后

2、点一下Select组件，他就……触发document的click事件，切换回去了！

应该是事件冒泡的问题，但查询了相关问答如何阻止react的事件冒泡，未能解决问题。
这是简化的DEMO，希望能得到解答！

Answer 1

react和dom关联起来就比较蛋疼 你就拿不到那个事件 怎么去阻止冒泡

看你的代码想到一个蛋疼的思路 可以看一下

const { Select, Button } = antd;
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

function handleClick(){
    console.log("切换为第二显示状态")
}

document.addEventListener('click', e => {
    if (e.target.nodeName.toLowerCase() === 'button') {
        return; 
      //阻止button所受影响
    }
   //切换页面显示状态
   //如何阻止点击Select组件所触发的click事件？
    var select = document.getElementsByClassName('toGetMySelectDom')[0]
    var target = e.target
     while (target.parentNode) {
         if (select == target) return
         target = target.parentNode
       }
    
    console.log('切换为第一显示状态');
}, false);

ReactDOM.render(
  <div>
    <Select
        mode="multiple"
        className="toGetMySelectDom"
        style={{ width: '50%' }}
        placeholder="Please select"
        defaultValue={['a10', 'c12']}
        onChange={handleChange}
    >
        {children}
    </Select>
    <Button onClick={handleClick}>按一下</Button>
 </div>
, mountNode);