React阻止事件冒泡

起因：

要用fullcalendar加个详情，点击弹出Modal，但是在点击详情Modal内的按钮时被fullcalendar监听到了就关闭了moreModal，然后跟着Modal所在的上下文也跟着被摧毁了，从用户视角来看就是点一下，框没了。

尝试解决：

我第一反应是用event.stopPropagation阻止冒泡，但是结果失败了，又想是不是因为react事件系统跟原生不一样，看了一篇文档，知道了react用的是合成事件系统（这就是为什么F12看见的是SyntheticEvent），然后我就直接用js添加事件，最后发现冒泡被拦截了，但是详情里的按钮也点不了了！

经过排查，确定是因为react的合成事件最终全部是冒泡到根节点<App/>统一处理的，如果使用js拦截冒泡的话，被拦截的dom下面的组件就不会触发事件。

再看了看文档，发现event有个nativeEvent属性，可以访问到原生的dom事件对象，然后使用event.nativeEvent.stopPropagation()就可以阻止原生事件的冒泡传播。

问题在于，我是用ant的Modal组件啊！Modal组件并没有提供react事件api的api！

那咋办？直接在Modal外面罩上一层div？问题是Modal组件是在body标签下面生成原生dom的啊？这也罩不住啊？

但是我转念一想，这是从原生的角度去看结构，如果从React组件上下文的角度去看，那就是在div<ReactDom>下的，然后我就在Modal外罩了一层div，给div上了一个onMouseDown监听，最后发现成了！我真牛逼！

代码：

<div 
    onMouseDown=(event)=>{
        event.nativeEvent.stopPropagation();
    }
>
    <Modal>
        <Detail/>
    </Modal>
</div>