Fermer pop-up react-leaflet après que l'utilisateur a cliqué sur le bouton dans la pop-up

Question

En gros, je veux créer une fermeture personnalisée pour le composant Popup de react-leaflet, il semble que ce ne soit pas un gros problème à réaliser avec l'API native de leaflet, mais avec le composant react de react-leaflet, je ne trouve pas la solution.

Answer 1

Actuellement, la seule façon que j'ai trouvée de fermer la popup est la suivante :

constructeur(props){
    super(props);
    this.popup = React.createRef();
}

// la magie
fermerPopupSurClic(){
    this.popup.current.leafletElement.options.leaflet.map.closePopup();
}

render(){
    return 

            Fermer la popup

    ;
}

J'espère que cela vous aidera !

Answer 2

Dans "react-leaflet": "^3.0.2", j'ai réussi à fermer la popup avec :

popupRef.current._closeButton.click()

Non pas très élégant en comparaison d'une future méthode Popup.close() qui DOIT fonctionner immédiatement, mais cela fait le travail...

Answer 3

J'ai fini par arriver à une solution similaire à la réponse de Luca, donc j'ai pensé la rajouter comme réponse également. J'avais besoin de fermer toutes les fenêtres contextuelles lors du déplacement ou du zoom de la carte et j'ai obtenu ceci :

import React, { useRef } from "react";
import { Map } from "react-leaflet"

export default () => {
  const mapRef = useRef(null);

  const closePopups = () => {
    mapRef.current.leafletElement.closePopup();
  };

  const handleOnDragend = e => {
    closePopups();
  };

  const handleOnZoomend = e => {
    closePopups();
  };

  if (typeof window === 'undefined') {
    return null;
  }

  return (

  )
}

Cela peut cependant être étendu pour que n'importe quoi puisse appeler la méthode closePopups.