如何将onClick事件的位置添加到hook中？

Question

我的代码在这里：

import { MapContainer, TileLayer } from "react-leaflet";
import React, { useState } from 'react';


    export default function App() {
      const [newLat, setNewLat] = useState(null);
      const [newLng, setNewLng] = useState(null);
    
    <MapContainer 
        center={[49.1951, 16.6068]} 
        zoom={defaultZoom} 
        scrollWheelZoom={false}
        eventHandlers={{
              click:(event)=>{
              setNewLat(event.latlng.lat());
              setNewLng(event.latlng.long());
              console.log(newLat, newLng);
              },
        }}>
    <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>

问题是当我点击地图时没有任何反应，我的错误是什么？谢谢！

Answer 1

在 react-leaflet v3 中，至少可以考虑以下选项以在地图上附加 click 事件处理程序（也包含在 official documentation 中）：

选项 1：通过 useMapEvents hook

function MyMap() {
  const [loc, setLoc] = useState(null);
  const map = useMapEvents({
    click: (e) => {
      setLoc(e.latlng);
      console.log(e.latlng.lat, e.latlng.lng);
    },
 
  })
  return null
}

export default function App() {
  return (
    <MapContainer
      center={[49.1951, 16.6068]}
      zoom={defaultZoom}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></TileLayer>
      <MyMap />
    </MapContainer>
  );
}

选项 2：通过 useMapEvent hook

The difference with option 1, the later one supports attaching a single event handler to the map instance

function MyMap() {
  const [loc, setLoc] = useState(null);
  const map = useMapEvent('click', (e) => {
      setLoc(e.latlng);
      console.log(e.latlng.lat, e.latlng.lng);
  })
  return null
}

export default function App() {
  return (
    <MapContainer
      center={[49.1951, 16.6068]}
      zoom={defaultZoom}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></TileLayer>
      <MyMap />
    </MapContainer>
  );
}

选项 3：通过 MapConsumer component:

function Map() {
  const [loc, setLoc] = useState(null);
  return (
    <MapContainer
      center={[49.1951, 16.6068]}
      zoom={defaultZoom}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></TileLayer>
      <MapConsumer>
        {(map) => {
          map.on("click", (e) => {
            setLoc(e.latlng);
            console.log(e.latlng.lat, e.latlng.lng);
          });

          return null;
        }}
      </MapConsumer>
    </MapContainer>
  );
}

选项 4：使用 useMap hook

function MyMap() {
  const [loc, setLoc] = useState(null);
  const map = useMap();
  map.on("click", (e) => {
     setLoc(e.latlng);
     console.log(e.latlng.lat, e.latlng.lng);
  });
  return null
}

function App() {
  return (
    <MapContainer
      center={[49.1951, 16.6068]}
      zoom={defaultZoom}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></TileLayer>
      <MyMap />
    </MapContainer>
  );
}

选项 5：创建地图后，事件将附加到基础地图实例 (whenCreated)：

function Map() {
  const [loc, setLoc] = useState(null);


  function hanleMapCreated(map){
    map.on("click", (e) => {
       setLoc(e.latlng);
       console.log(e.latlng.lat, e.latlng.lng);
    });
  }

  return (
    <MapContainer
      center={[49.1951, 16.6068]}
      zoom={defaultZoom}
      scrollWheelZoom={false}
      whenCreated={hanleMapCreated}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></TileLayer>
    </MapContainer>
  );
}

如何将onClick事件的位置添加到hook中？

How to add the position of onClick event to the hook?

javascript

reactjs

react-leaflet