在 OpenLayers Overlay 上未触发 ReactJS 组件的点击答案

【问题标题】：Clicks on ReactJS components not firing on an OpenLayers Overlay在 OpenLayers Overlay 上未触发 ReactJS 组件的点击
【发布时间】：2016-02-17 10:27:20
【问题描述】：

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

为了创建我的叠加层，我是这样进行的：

创建一个承载 React 组件的 div：

    var domDivElement = document.createElement('div');

    ReactDOM.render(
      <div onClick={function() { console.log('You clicked.'); }}>
        Hello World!
      </div>,
      domDivElement
    );

将元素作为叠加层添加到地图中

    var popover = new ol.Overlay({
      element: domDivElement,
    });

    map.addOverlay(popover);

    map.on('singleclick', function(evt) {
      popover.setPosition(evt.coordinate)
    });

弹出框已正确显示，但You clicked. 从未显示在控制台中。如果我在普通 DOM 中呈现完全相同的元素，则会触发该事件。奇怪的是，如果我在 VanillaJS 中使用 DOM 元素的 onclick 属性执行此操作，它会触发一次点击。

有人遇到过类似的问题吗？

更新：哦，更奇怪的是 onMouseEnter 和 onMouseLeave 事件实际上是在我的 React 组件上触发的。

【问题讨论】：

标签： reactjs openlayers-3

【解决方案1】：

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

我改用了这样的东西：

// regular jsx onClick does not work when stopEvent is true
var closer = ReactDOM.findDOMNode(this.refs.popupCloser);
if (closer.onclick === null) {
  closer.onclick = function() {
    me._setVisible(false);
    return false;
  };
}

【讨论】：

当你用stopEvent: false配置覆盖时它不起作用吗？ "是否应该停止到地图视口的事件传播。默认为 true。如果为 true，则叠加层与控件放置在同一容器中（CSS 类名称 ol-overlaycontainer-stopevent）；如果为 false，则将其放置在容器中使用 CSS 类名 ol-overlaycontainer。”
谢谢@ahocevar！您的解决方案正是我真正想要的。原始答案实际上适用于事件，但是，我不想以与默认反应方式不同的方式管理我的事件。

【解决方案2】：

github.com/marcel-dancak发现了一个精彩solution/workaround：

const convertToClick = (e) => {
    const evt = new MouseEvent('click', { bubbles: true })
    evt.stopPropagation = () => {}
    e.target.dispatchEvent(evt)
}

<div onMouseUp={convertToClick}>
  <button onClick={handleClick}>x</button>
  ...
</div>

【讨论】：