在自定义对话框上呈现React按钮时，OnClick无法正常工作

Posted 2021-04-07

我有点迷失希望有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

你可以在内容中看到我故意把一个带有一些ID的div，因为后来我有了代码：

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

然后它工作。

为什么？

答案

所以这就是问题所在

当您将小册子对话框中的按钮作为内容放置时，在显示对话框之前它不在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."); });