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 组件中使用。