Redux-form : triggerring onChange event on fireld based on another button click

问题

this is a suppliment question of this question.

What I am trying to do:

I have a button that gets my current location on click. This button should also fill the <Field> component with values, so that I can submit it later.

What's happening:

My Field component is unaware of any changes, so I can't submit the value. the redux state isn't being populated and I think it is happening because the Field onchange event isn't being triggered. I tried setting the state directly to onChange, but it isn't working (probably shouldn't either).

Thanks for helping out this noob person.

export class GetLocation extends Component{
constructor(){
    super();
    this.state = {
        latitude: '',
        longitude: ''
    };
    this.getMyLocation = this.getMyLocation.bind(this);
}
componentWillMount(){
    console.log('mon')
    this.getMyLocation();
}
getMyLocation = () => {
    const location = window.navigator && window.navigator.geolocation;

    if (location) {
        location.getCurrentPosition((position) => {
            this.setState({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
            })
        }, (error) => {
            this.setState({ latitude: 'err-latitude', longitude: 'err-longitude' })
        })
    }
}

render(){
    const { latitude, longitude } = this.state;
    return(
    <div>
        <p>Your location is </p>
        <Field
            name="latitude"
            type="text"
            component="input"
            onChange={this.state.latitude}
        />
        {/*<input name="latitude" value={this.state.latitude} />*/}
        {/*<input type="text" name="longitude" value={longitude} />*/}
        <button type="button" onClick={this.getMyLocation}>Get Geolocation</button>
    </div>

    );
}
}

this is my wizardform code:

import React from "react";
import { Field, reduxForm, FormSection } from "redux-form";
import validate from "../middleware/validate";
import { Address, Camp, GetLocation } from "../components/renderField";
import {connect} from "react-redux";

const renderError = ({ meta: { touched, error } }) =>
  touched && error
? <span>
    {error}
  </span>
: false;

let WizardFormSecondPage = props => {
  const { handleSubmit, previousPage} = props;
  return (
    <form onSubmit={handleSubmit} className="form-horizontal">
      <div className="panel">
        <div className="form-group">
          <label className="control-label col-sm-2" htmlFor="address">
            Location
          </label>
          <div className="col-sm-10">
            <p className="help-block lead">Write your address below</p>
            <p className="help-block">You can add more than one. Add as many as you can.</p>

        <div className="row">
          <div className="col-sm-12">
              <p className="label-lead">Own Address</p>
                 <FormSection name="ownAddress" component={Address}>
                    <Address />
                </FormSection>

                <p className="label-lead">Host Address</p>
                 <FormSection name="hostAddress" component={Address}>
                    <Address />
                </FormSection>

                <p className="label-lead">Camp</p>
                 <FormSection name="camp" component={Camp}>
                   <Camp />
                </FormSection>

              <p className="label-lead">Location Coordinates</p>
              <FormSection name="location" component={GetLocation}>
                  <GetLocation />
              </FormSection>
          </div>
        </div>
      </div>              
  </div>

  <div className="form-group">
    <label className="control-label col-sm-2">Household</label>
    <div className="col-sm-10">
      <p className="help-block lead">Who are you in your household?</p>
      <p className="help-block">It can be a husband, wife, children or grandparent. Select the appropriate one. </p>
      <Field name="houseHold" component="select" className="form-control">
          <option />
        <option value="1">None</option>
        <option value="2">Husband</option>
        <option value="3">Spouse</option>
        <option value="4">Child-1</option>
        <option value="5">Child-2</option>
        </Field>
    </div>

  </div>

  <div>
      <button type="button" className="previous" onClick={previousPage}>
        Previous
      </button>
      <button type="submit" className="next">
        Next
      </button>
    </div>
  </div>
</form>
  );
};

export default reduxForm({
   form: "wizard", //                 <------ same form name
    destroyOnUnmount: false, //        <------ preserve form data
   forceUnregisterOnUnmount: true, // <------ unregister fields on     unmount
  validate
})(WizardFormSecondPage);

回答1:

I would use the method change to set the value of the latitude field in your Redux store, so getMyLocation will look like:

getMyLocation() {
    const location = window.navigator && window.navigator.geolocation;
    if (location) {
      location.getCurrentPosition(position => {
        this.props.change("latitude", position.coords.longitude);
      });
    }
  }

and your field will be just:

 <Field name="latitude" component="input"  />

See the sandbox here

来源：https://stackoverflow.com/questions/46389215/redux-form-triggerring-onchange-event-on-fireld-based-on-another-button-click