在自定義對話框上呈現React按鈕時，OnClick無法正常工作

Question

我有點迷茫，希望有JS知識的人能為您提供幫助。

我正在使用此對話框：在傳單地圖上的https://github.com/NBTSolutions/Leaflet.Dialog 。

只需調用以下方法即可在地圖上打開對話框：

let dialog = L.control.dialog({
                size: [300, 300],
                anchor: [70, 0]
            });
dialog.setContent("<div id='camera-view-container'></div>")
dialog.addTo(that.mymap); // adds dialog on the map

您可以在內容中看到我故意在div中添加了一些ID，因為稍后我有了代碼：

ReactDOM.render(<button onClick={()=>{alert("test")}}>Test</button>, document.getElementById('camera-view-container'));

問題是我可以在對話框上看到按鈕 ，但是單擊處理程序不起作用？

是什么導致此問題？ 我應該在代碼的哪一部分尋找解決方案？

謝謝

---

如果我很奇怪：

1. 將按鈕放在組件內，然后

2. 我放入的內部組件渲染方法：

   <button className="buttons" ref={(save) => this.save = save}>Save</button>

3. 最后，在該組件的componentDidMount中，我執行了以下操作：

   this.save.addEventListener("click", () => {alert("test")});

然后就可以了。

為什么？

Answer 1

所以這是問題

當您將按鈕作為內容放在傳單對話框中時，直到對話框顯示出來，它才在DOM中。 因此，您無法在它出現（或完全加載）之前將其定位。

有一些內置的功能，可顯示傳單對話框的行為

您必須在某處設置地圖元素-

  var map = L.map('map').setView([42.8962176,-78.9247419], 12);

因此，您可以在打開對話框時設置事件

 map.on('dialog:opened', function(e){ console.log(e.target); //your content element });

您將目標作為內容。 這是要走的路。 您可以嘗試在:opened回調中調用該方法。

對於傳單的所有實例，您都可以進入視圖源

http://nbtsolutions.github.io/Leaflet.Dialog/

在這里您將獲得一組方法

map.on('dialog:opened', function(e){ console.log("dialog opened event fired."); });
map.on('dialog:closed', function(e){ console.log("dialog closed event fired."); });
map.on('dialog:destroyed', function(e){ console.log("dialog destroyed event fired."); });
map.on('dialog:locked', function(e){ console.log("dialog locked event fired."); });
map.on('dialog:unlocked', function(e){ console.log("dialog unlocked event fired."); });
map.on('dialog:frozen', function(e){ console.log("dialog frozen event fired."); });
map.on('dialog:unfrozen', function(e){ console.log("dialog unfrozen event fired."); });
map.on('dialog:updated', function(e){ console.log("dialog updated event fired."); });
map.on('dialog:resizestart', function(e){ console.log("dialog resizestart event fired."); });
map.on('dialog:resizing', function(e){ console.log("dialog resizing event fired."); });
map.on('dialog:resizeend', function(e){ console.log("dialog resizeend event fired."); });
map.on('dialog:movestart', function(e){ console.log("dialog movestart event fired."); });
map.on('dialog:moving', function(e){ console.log("dialog moving event fired."); });
map.on('dialog:moveend', function(e){ console.log("dialog moveend event fired."); });
map.on('dialog:closehidden', function(e){ console.log("dialog closehidden event fired."); });
map.on('dialog:closeshown', function(e){ console.log("dialog closeshown event fired."); });
map.on('dialog:resizehidden', function(e){ console.log("dialog resizehidden event fired."); });
map.on('dialog:resizeshown', function(e){ console.log("dialog resizeshown event fired."); });