如何知道 react-leaflet 弹出窗口何时关闭答案

【问题标题】：How to know when a react-leaflet popup is closed如何知道 react-leaflet 弹出窗口何时关闭
【发布时间】：2019-08-13 10:04:04
【问题描述】：

我有一张带有一些标记的“传单反应”地图。单击标记时，将打开一个弹出窗口。当您单击离开或关闭弹出窗口时，我需要知道何时关闭，以便判断它是否打开。

标记生成看起来像下面的代码。 Marker 和 Popup 来自“react-leaflet”，SiteForm 是我的代码。

var markers = this.props.sites.map((item, i) => {
  <Marker icon={icon}  key={i} position={{ lng: co[0], lat: co[1] }}>
    <Popup> 
        <SiteForm item={item} />
    </Popup>
  </Marker> 
}

在 Siteform 的 componentDidMount 中，我可以判断何时打开了弹出窗口，但关闭弹出窗口时不会触发 componentWillUnmount。

我尝试过扩展 Marker，但这是不好的做法，而且我无法从 Marker Symbol 扩展。我也尝试将 Popup 包装在一个组件中，但是当页面加载未打开弹出窗口时，componentDidMount 在每个标记上运行。

【问题讨论】：

您可以为弹出窗口或标记提供可选属性onClose: () => void
将 onClose={this.closePopup} 添加到或不会调用函数 this.closePopup

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

Layer.popupclose event 可以用来解决这个问题，

绑定到该层的弹出窗口关闭时触发

如果react-leaflet library popupclose 事件可以像这样附加到地图组件：

const MapComponent = props => {
  const { zoom, center } = props;

  const handlePopupClose = (e) => {
    console.log(e.popup)
  }


  return (
    <div>
      <Map center={center} zoom={zoom} onPopupClose={handlePopupClose}>
        <TileLayer url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"  />
        <Marker  position={center}>
          <Popup>
            <div>Australia</div>
          </Popup>
        </Marker>
      </Map>
    </div>
  );
}

Demo

【讨论】：