从另一个组件将值获取到redux表单字段中

时间:2018-11-30 20:22:35

标签: reactjs redux redux-form

我通过使用google-maps-react实现了google map组件以查看当前位置和标记拖动功能,现在我想用这种方式尝试的纬度和经度填充我的redux表单字段

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>
)
    }

当用户要显示到注册组件的路线时,我要使用 componentDidMount 显示他/她的当前位置,并且还想给用户提供机会选择他们的位置拖动标记

我是redux表单的新手,所以对于如何将经度和纬度绑定到reduxform到提交我没有更好的主意,请帮助我

0 个答案:

没有答案