получить значения в поле избыточной формы из другого компонента - PullRequest
Новая
       6

получить значения в поле избыточной формы из другого компонента

0 голосов
/ 30 ноября 2018

Я реализовал компонент карты Google для просмотра текущего местоположения и функциональности перетаскивания маркера, используя google-maps-реаги * Теперь я хочу заполнить поле формы с избыточностью и широтой и долготой, которые я пробовал таким образом

Location.js 

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import { Field, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";

class Location extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lat: null,
      lng: null,
      markers: []
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(position =>
      this.setState({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      })
    );
  }

  onMarkerDragEnd = coord => {
    const { latLng } = coord;
    const lat = latLng.lat();
    const lng = latLng.lng();

    this.setState({
      lat: lat,
      lng: lng
    });

    console.log(lat, lng);

  };

  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>;
    }
    const style = {
      width: "100%",
      height: "100vh"
    };
    return (
      <Map
        google={this.props.google}
        zoom={11}
        style={style}
        initialCenter={{
          lat: this.state.lat,
          lng: this.state.lng
        }}
        center={{
          lat: this.state.lat,
          lng: this.state.lng
        }}
        onClick={this.mapClicked}
      >
        <Marker
          title={"Geolocation"}
          position={{
            lat: this.state.lat,
            lng: this.state.lng
          }}
          draggable={true}
          onDragend={(t, map, coord) => this.onMarkerDragEnd(coord)}
        />
      </Map>
    );
  }
}

const selector = formValueSelector("registershop");

const mapStateToProps = state => {
  //
  //
};

export default GoogleApiWrapper({
  apiKey: "......"
})(connect(mapStateToProps)(Location));

Register.JS 

import Location from "../common/Location";
    class Register extends Component {
   const { handleSubmit } = this.props;
    return (
     <div>
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
     <label>Lat:</label>
     <Field name="lat" component="input" type="number" step="0.01" />
     <label>Lng:</label>
     <Field name="lng" component="input" type="number" step="0.01" />
     </form>
<Location/>
<div>
)
    }

, когда пользователь направляется к компоненту регистра iхочу показать его / ее текущее местоположение, для которого я использовал componentDidMount , а также я хотел дать пользователю возможность выбрать свое местоположение, перетащив маркер

Я новичок в редуксеформа, так что у меня нет лучшего представления о том, как привязать долготу и широту к редуформе для отправки, пожалуйста, помогите мне

...