Question

我有一张“小叶反应”地图，上面有一些标记。单击标记后，将打开一个弹出窗口。当您单击离开或关闭弹出窗口时，我需要知道什么时候关闭了，以便我知道它是否打开。

标记生成看起来像下面的代码。标记和弹出窗口来自“ 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会在每个标记上运行。

Answer 1

Layer.popupclose event可以用于此事，

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

在react-leaflet library popupclose事件的情况下，可以将这样的事件附加到Map组件：

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

如何知道何时关闭反应叶弹出窗口

1 个答案: