реакции-администратора изменить значение TextInput с помощью скрипта - PullRequest
Новая
       3

реакции-администратора изменить значение TextInput с помощью скрипта

0 голосов
/ 15 января 2019

Я реализую пользовательский ввод, который должен позволять выбирать координаты на карте (реакции-листовки).Я использую крючок 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>
        )
    }
}
...