سلام استاد
من یک نقشه دارم که میخوام قتی روش کلیک میکنم لان و لت اون نقطه رو بریزه تو اینپوت و دوتا اینپوت دیکه رو هم دستی پر کنه کاربر و بعد اطلاعات رو بفرسته سرور
همه کارش انجام شده اما مختصات رو با 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> ); } }