单击未在OpenLayers覆盖上触发的ReactJS组件

我正在尝试创建一个地图应用程序。整个UI都在React中，地图是纯OpenLayers。我想在用户单击某些层时显示一个弹出窗口。然后他应该能够点击它来触发更多的动作

要创建覆盖图，以下是我的操作步骤：

• 创建承载React组件的div：

var-domDivElement=document.createElement（'div'）；
ReactDOM.render(
你好，世界！
,
多姆迪夫元素
);

• 将元素作为覆盖添加到地图中

var popover=new ol.Overlay({
元素：domDivElement，
});
map.addOverlay（popover）；
map.on（'singleclick'，函数（evt）{
popover.设置位置（evt.坐标）
});

弹出框显示正确，但您单击的

。

永远不会显示在控制台中。如果在普通DOM中呈现完全相同的元素，则会触发事件。 奇怪的是，如果我在VanillaJS中使用DOM元素的onclick属性执行此操作，它会触发一次单击

有没有人遇到过类似的问题

---

更新：哦，更奇怪的是，

onMouseEnter

和

onMouseLeave

事件实际上是在我的React组件上触发的。

对，我也遇到过这个问题。这与ol3中的stopEvent有关

我用了这样的方法：

//当stopEvent为true时，常规jsx onClick不起作用
var closer=ReactDOM.findDOMNode（this.refs.popupCloser）；
if（closer.onclick==null）{
closer.onclick=函数（）{
me._setVisible（假）；
返回false；
};
}

发现了一个精彩的：

const convertToClick=（e）=>{
const evt=new MouseEvent（'click'，{bubbles:true}）
evt.stopPropagation=（）=>{}
e、 目标调度事件（evt）
}

x
...

使用

stopEvent:false配置覆盖时，它不起作用吗？“是否应停止向地图视口的事件传播。默认值为true。如果为true，则将覆盖放置在与控件相同的容器中（CSS类名ol OverlyContainer stopevent）；如果为false，则将覆盖放置在CSS类名ol OverlyContainer的容器中。”谢谢@ahocevar！你的解决方案正是我想要的。最初的答案实际上适用于事件，但是，我不希望以与默认的反应方式不同的方式管理我的事件。