反应传单，将标记的 e.latlng 属性传递给 formik

Question

function Map({type="show"}) {
    function LocationMarker() {
        const [position, setPosition] = useState(null)
        const map = useMapEvent('click', (e) => {setPosition(e.latlng);console.log(e.latlng)});
        
          return position === null ? 
          null : (<Marker position={position}><Popup>You are here</Popup></Marker>)
        }
          return (
    <div className="App">
      <div id="map">
      <MapContainer center={[31.8123, 34.7770]} zoom={8}   onClick={console.log('hhh')}>
        <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

 <LocationMarker/> 
      </MapContainer>
      </div>
    </div>
  )
}

你好，我想构建如下功能：用户点击传单地图-> 在点击的地方创建一个标记-> 并将该地点的经纬度传递给 formik。我的问题是我不知道如何在 LocationMarker 函数之外传递 latlng 状态。这是我的第一个问题，我对编程还很陌生，所以我希望我的问题有道理并且你能帮助我。

Answer 1

您可以使用 formik 的 setvalue 函数直接在组件中设置值。

const [field, meta, helpers] = useField(props.name);
const { value } = meta;
const { setValue } = helpers;

或者如果你想在父组件中设置它，你可以传递一个函数，当你在本地设置位置时将调用该函数。

function Map({type="show", onChange}) {
    function LocationMarker() {
        const [position, setPosition] = useState(null)
        const map = useMapEvent('click', (e) => {setPosition(e.latlng);console.log(e.latlng)});
        onChange(e.latlng);
          return position === null ? 
          null : (<Marker position={position}><Popup>You are here</Popup></Marker>)
        }

反应传单，将标记的 e.latlng 属性传递给 formik

react leaflet, pass marker's e.latlng property to formik

leaflet

reactjs

react-leaflet

反应传单，将标记的 e.latlng 属性 传递给 formik

react leaflet, pass marker's e.latlng property to formik

leaflet

reactjs

react-leaflet

反应传单，将标记的 e.latlng 属性传递给 formik