在拖动反应时获取当前坐标 leaflet

Question

I am a newbie of react leaflet. I created my map and add polygon successfully. However, when I drag or zoom on my map, how can I get current coordinates of the entire screen? I use the map of openstreetmap. Thank you very much for your support. My code:

class App extends Component {
  componentDidMount()
  {
    //console.log(polygonData);
    navigator.geolocation.getCurrentPosition(function(position) { //mdn geolocation
      console.log(position)
    });
  }

  onEachContry = (feature, layer) =>{
    const contryName = feature.properties.NAME_1;
    //console.log(feature.properties.NAME_1);
    layer.bindPopup(contryName);

    if(contryName == "An Giang")
    {
      layer.options.fillColor = "yellow";
    }

    layer.on({
      /*mouseover: (event) => {
        console.log(event);
      }*/
    }
    )
  }

  countryStyle = {
    fillColor: "red",
    fillOpacity: 0.5,
    color: "black",
    weight: 2
  
  }

  render() {
    return (
        <MapContainer center={[10.7743, 106.6669]} zoom={6} >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <GeoJSON
          style = {this.countryStyle}
          data={polygonData.features}
          onEachFeature={this.onEachContry}
          
          />
        </MapContainer>
    );
    }
}

/*<Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        */

export default App;

Answer 1

Use a function component as a MapContainer's child. There using useMapEvents hook listen to dragend event. e.target.getBounds provides everything you need, methods like getSouth() , getWest() , getEast() etc

 function MyComponent() {
        const map = useMapEvents({
          dragend: (e) => {
            console.log("mapCenter", e.target.getCenter());
            console.log("map bounds", e.target.getBounds());
          }
        });
        return null;
      }

and then

<MapContainer
     ...><MyComponent/>
</MapContainer>

Demo