react-admin通过脚本更改TextInput值

时间:2019-01-15 10:20:03

标签: react-admin

我正在实现一个自定义输入,该输入应允许在(反应传单)地图上选择坐标。我使用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" />
                &nbsp;
                <TextInput source="longitude" />
                <Map center={position} zoom={this.state.zoom}>
                    <TileLayer
                        attribution='&amp;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>
        )
    }
}

0 个答案:

没有答案