我有一个'传单 - 反应'地图,带有一些标记。单击标记时,将打开一个弹出窗口。当你点击或关闭弹出窗口时,我需要知道什么时候关闭,所以我可以判断它是否打开。
标记生成看起来像下面的代码。 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会在每个标记上运行。
可以利用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>
);
}