单击 ReactJS 组件不会在 OpenLayers Overlay 上触发

Question

我正在尝试创建地图应用程序。整个 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 组件上触发的。

Answer 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;
  };
}

Answer 2

github.com/marcel-dancak found a brilliant 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>

单击 ReactJS 组件不会在 OpenLayers Overlay 上触发

Clicks on ReactJS components not firing on an OpenLayers Overlay

reactjs

openlayers-3