Javascript 在自定义对话框上渲染“反应”按钮时单击“不工作”

我有点失去了希望有JS知识的人可以帮助我

我正在使用此对话框：，在传单地图上

调用以下方法时，只需在地图上打开一个对话框即可：

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

let dialog=L.control.dialog({
尺寸：[300300]，
主播：[70,0]
});
dialog.setContent（“”）
dialog.addTo（that.mymap）；//在地图上添加对话框

您可以在内容中看到，我故意用一些ID放置了一个div，因为后来我有了代码：

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

ReactDOM.render（{alert（“test”）}>test，document.getElementById（'camera-view-container'）；

问题是我可以看到对话框上的按钮，但是，单击处理程序不工作

是什么导致了这个问题？ 我应该在代码的哪一部分寻找解决方案

谢谢

---

很奇怪，如果我：

将按钮放在组件内，然后

内部组件渲染方法我放了：

this.save=save}>save

最后在componentDidMount中，我会：

this.save.addEventListener（“单击”，（）=>{alert（“test”）}）

然后它就起作用了

为什么？

所以问题出在这里

当您将按钮作为内容放入“传单”对话框中时，在显示该对话框之前，它不在DOM中。因此，在它出现（或完全加载）之前，您无法将其作为目标

在显示传单对话框时，有一些内置函数可以显示传单对话框的行为

您必须已将map元素设置在如下位置-

  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

回调中的方法

对于传单的所有实例，您都可以进入查看源

在这里，您将获得一组方法

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."); });

---

它是否在控制台中记录了任何错误？@AnshulSahni控制台上没有任何内容。您可以创建一个react沙盒，以便更容易调试，当前代码段未澄清anything@AnshulSahni我已经更新了我的问题

ReactDOM.render（{alert（“test”）}}>test，document.getElementById（'camera-view-container'）这一行实际上正在工作。你能在stackblitz中创建一个演示吗？我添加了这个：
that.mymap.on（'dialog:opened'，function（e）{ReactDOM.render（{alert（“test”）}>test，document.getElementById（'camera-view-container'）；}）但现在根本不显示按钮