React-Leaflet：點擊 map 時設置標記

Question

我正在使用 chrome 版本 100.0.4896.127（官方構建）（64 位）瀏覽器在我的 Ubuntu 20.4 VM 機器上開發 React 應用程序。

我創建了以下應用程序：

https://codesandbox.io/s/react-leaflet-map-with-marker-forked-vtq00e?file=/Map.js

我正在嘗試使用以下方法在點擊 map 時設置一個標記：

在我的Map.js我設置了點擊事件：

  return (
    <div id="map" style={style}>
      <MapContainer
        // center={[40.0151, -105.2921]}
        center={[40.7579747, -73.9877313]}
        // @ts-ignore
        onClick={addMarker}
        zoom={15}
        style={{ height: "90%" }}
        // @ts-ignore
        onZoomEnd={console.log}
      >

下面的 function 應該設置標記：

function addMarker(e) {
  console.log("marker \n");

  const { markers } = this.state;
  markers.pop();
  markers.push(e.latlng);
  this.setState({ markers });
}

但是，當我點擊 map 時，什么也沒有發生。 我也沒有得到控制台 output。

有什么建議我做錯了嗎？

感謝您的回復！

Answer 1

TypeScript 告訴您onClick和onZoomEnd道具在 React Leaflet 的<MapContainer>組件上不可用是有原因的：后者是在 React Leaflet 版本 3 中引入的，現在應該已經通過useMapEvents鈎子使用了 map 事件在您的 CodeSandbox 中可以看到，您已經嘗試了一些嘗試。

useMapEvents掛鈎可能不明顯的是，它必須在將成為 MapContainer 的子（后代）的自定義組件中使用。 請參閱例如嘗試使用 react-leaflet 對單擊應用縮放

此外， this.setState是典型的基於類的React 組件，而在您的 CodeSandbox 中，您使用的是功能組件。 請注意，鈎子只能在功能性 React 組件中使用。