javascript - 在自定义对话框上呈现 React 按钮时 OnClick 不起作用

Question

我有点迷茫，希望有 JS 知识的人能帮忙。

我正在使用这个对话框:https://github.com/NBTSolutions/Leaflet.Dialog , 在传单 map 上。

当您调用以下方法时，只需在 map 上打开一个对话框即可:

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

然后就可以了。

为什么？

Answer 1

问题来了

当您将按钮作为内容放入传单对话框中时，在对话框显示之前，它不在 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 回调中的方法。

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

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