Как узнать, когда закрывается всплывающее окно - PullRequest
Новая
       15

Как узнать, когда закрывается всплывающее окно

0 голосов
/ 22 марта 2019

У меня есть карта «Листовка-реакция» с некоторыми маркерами. При нажатии на маркер открывается всплывающее окно. Когда вы щелкаете или закрываете всплывающее окно, мне нужно знать, когда оно закрыто, чтобы определить, открыто ли оно.

генерация маркера выглядит как код ниже. Маркер и Popup взяты из «ответной листовки», 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> 
}

в componentDidMount в Siteform Я могу сказать, когда открывается всплывающее окно, но componentWillUnmount не запускается при закрытии всплывающего окна.

Я пытался расширить маркер, но это плохая практика, и я также не смог выйти за пределы символа маркера. Я также попытался обернуть Popup в компоненте, но componentDidMount запускается на каждом маркере, когда страница загружается, а не открывается всплывающее окно.

1 Ответ

1 голос
/ 23 марта 2019

Layer.popupclose событие может быть использовано для этого вопроса, который

Запускается, когда всплывающее окно, привязанное к этому слою, закрывается

В случае react-leaflet библиотека 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>
  );
}

Демо

...