ست کردن ولیو اینپوت

سلام استاد 

من یک نقشه دارم که میخوام قتی روش کلیک میکنم لان و لت اون نقطه رو بریزه تو اینپوت و دوتا اینپوت دیکه رو هم دستی پر کنه کاربر و بعد اطلاعات رو بفرسته سرور 

همه کارش انجام شده اما مختصات رو با setattribute پر کرده بودم تو اینپوت ها و وقتی سابمیت میکردم این و مقدار خالی فرستاده میشه در حالکیه اگر دستی یه چیزی توشون بنویسم فرستاده میشن

import React, {Component} from 'react';
import {render} from 'react-dom';
import ol from './ol'
import Map from 'ol/Map.js';
import Overlay from 'ol/Overlay.js';
import View from 'ol/View.js';
//import {toStringHDMS} from 'ol/coordinate.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';

import {fromLonLat, toLonLat} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import axios from "axios";


const rootNode = document.getElementById('root');

export default class ReactGeo extends Component {

    constructor(props) {
        super(props)

        this.state = {
            lon: '',
            lat: '',
            title: '',
            type: '',
            address: ''
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();
        const { history } = this.props
        console.log(this.state)

        const info = {
            lon: this.state.lon,
            lat: this.state.lat,
            title: this.state.title,
            type: this.state.type,
            address: this.state.address
        }


        axios.post('/maps', this.state)
            .then(response => {
                // redirect to the homepage
                history.push('/')
            }).catch((error)=>console.log(error));
    }



    componentDidMount() {

        var layer = new TileLayer({
            source: new OSM()
        });

        var view = new View({
            center: ol.proj.fromLonLat([51.304470, 35.755229]),
            zoom: 4
        });

        var map = new Map({
            layers: [layer],
            target: 'map',
            view: view
        });

        map.on('click', function (evt) {
            var coordinate = evt.coordinate;
            var hdms = (toLonLat(coordinate));
            var lon = hdms[0];
            var lat = hdms[1];
            return lon;

        });
        console.log(lon);
    }

    render() {
        const { lon, lat, title, type, address} = this.state;
        return (

            <section className="panel-map">
                <div id="info"></div>
                <div id="map" className="{styles.content}">

                </div>
                <div id="form">

                    <form onSubmit={this.handleSubmit}>

                        <div className='form-group'>
                            <label htmlFor='name'>مختصات</label>
                            <input
                                id='lon'
                                type='text'
                                className={'form-control'}
                                name='lon'
                                value={this.state.lon}
                                onChange={this.handleChange}
                            />
                            <input
                                id='lat'
                                type='text'
                                className={'form-control'}
                                name='lat'
                                value={this.state.lat}
                                onChange={this.handleChange}
                            />
                            <input
                                id='title'
                                type='text'
                                className={'form-control'}
                                name='title'
                                value={this.state.title}
                                placeholder={'عنوان'}
                                onChange={this.handleChange}
                            />
                            <input
                                id='type'
                                type='text'
                                className={'form-control'}
                                name='type'
                                value={this.state.type}
                                placeholder={'نوع'}
                                onChange={this.handleChange}
                            />
                            <input
                                id='address'
                                type='text'
                                className={'form-control'}
                                name='address'
                                value={this.state.address}
                                placeholder={'آدرس'}
                                onChange={this.handleChange}
                            />

                        </div>
                        <button type='submit' className='btn btn-primary'>Send data!</button>
                    </form>
                </div>
            </section>
        );
    }
}