如何在传单绘制中将按钮附加到弹出窗口中？

Question

我想要弹出窗口中的按钮对弹出窗口附加层进行一些操作。

 L.marker(coors[i], { icon })
          .addTo(this.drawnItem)
          .bindPopup(this._getCustomIcon(mix))
          .openPopup();

下面是我的_getCustomIcon()

 _getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    let CustomPopup = L.popup({ className: "customPopup" }).setContent(
      `<p> ${value}</p> ${delLayer}` //here is error
    );
    return CustomPopup;
  };

Answer 1

您将字符串与对象混合在一起，请尝试 <p> ${value}</p> <button>Delete</button>

Answer 2

这里delLayer是一个对象而不是一个纯字符串。在字符串模板文字

中连接时，应使用 .outerHTML 将元素对象转换为字符串

_getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    let CustomPopup = `<p> ${value}</p> ${delLayer.outerHTML}`;
    return CustomPopup;
};

或者您可以尝试使用连接作为纯字符串，例如

let delLayer = '<button>Delete</button>'
let CustomPopup = `<p> ${value}</p> ${delLayer}`;

Answer 3

只需使用此代码

 _getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    return delLayer;
  };

您的错误是在使用已经创建弹出窗口的 bindPopup 之后创建了弹出窗口！

如何在传单绘制中将按钮附加到弹出窗口中？

How to append button into popup in leaflet draw?

javascript

reactjs

leaflet

leaflet-draw