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

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

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

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

可能导致此问题的原因是什么？我应该在哪部分代码中寻找解决方案？

由于

非常奇怪，如果我：

将按钮放在组件中
内部组件渲染方法我把：

<button className="buttons" ref={(save) => this.save = save}>Save</button>
最后在我所做的那个组件的componentDidMount中：

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

然后它有效。

为什么吗

Answer 1

这是问题所在

当您将按钮作为内容放置在传单对话框中时，直到显示对话框之前，该按钮才在DOM中。因此，在它出现（或完全加载）之前，您无法对其定位。

有一些内置功能，可显示传单对话框的行为

您必须将地图元素设置为-

solve()

因此，您可以在打开对话框时设置事件

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

您将目标作为内容。这是要走的路。您可以尝试在map.on('dialog:opened', function(e){ console.log(e.target); //your content element });回调中调用该方法。

对于所有传单实例，您都可以进入视图源

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

在这里您将获得一组方法

:opened

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

1 个答案: