我正在实现一个自定义输入,该输入应允许在(反应传单)地图上选择坐标。我使用onDragend
钩子从地图中获取选定的LatLng
。现在,我需要将值设置为两个TextInputs
。我该如何实现?
import React, { Component, createRef } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
import { TextInput } from 'react-admin';
import * as L from 'leaflet';
export class SimpleExample extends Component {
state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
}
refmarker = createRef();
updatePosition = () => {
const marker = this.refmarker.current
if (marker != null) {
const latLng = marker.leafletElement.getLatLng();
this.state.lat = latLng.lat;
this.state.lng = latLng.lng;
// <<< UPDATE FIELDS HERE >>>
}
}
render() {
const position = [this.state.lat, this.state.lng];
const customIcon = L.icon({
iconUrl: 'marker-icon.png',
shadowUrl: 'marker-shadow.png'
});
return (
<div>
<TextInput source="latitude" />
<TextInput source="longitude" />
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker ref={this.refmarker} position={position} draggable={true} onDragend={this.updatePosition} icon={customIcon}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
</div>
)
}
}