點擊ReactJS組件未在OpenLayers Overlay上觸發

我試圖創建一個地圖應用程序。整個用戶界面在React中，地圖是純OpenLayers。我想在用戶點擊某些圖層時顯示彈出窗口。然後，他應該可以點擊它來觸發更多的動作。點擊ReactJS組件未在OpenLayers Overlay上觸發

要創建我的疊加，這裏是我如何進行：

創建承載陣營組件一個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組件上觸發的。

來源

2016-02-17 Julien Pradet

對我也碰到過這個。這與ol3中的stopEvent有關。

我用這樣的事情，而不是：FALSE`：

當配置與`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; 
    }; 
}

來源

2016-02-17 11:02:45 bartvde

不工作？「是否應該停止向地圖視口傳播事件，默認值爲true，如果爲true，則覆蓋層與控件（CSS類名稱ol-overlaycontainer-stopevent）放在同一個容器中;如果爲false，則放置在容器中與CSS類名稱ol-overlaycontainer「。 – ahocevar

謝謝@ahocevar！你的解決方案就是我真正想要的。原來的答案實際上適用於這些事件，但是，我不想管理我的事件與默認的反應方式不同。 –

謝謝@ahocevar！這是一個頭部劃痕。 – jOshT

點擊ReactJS組件未在OpenLayers Overlay上觸發

回答

相關問題