Question

这是this问题的补充问题。

我想做的事情：

我有一个按钮可以点击我的当前位置。此按钮还应该使用值填充<Field>组件，以便稍后提交。

发生了什么：

我的Field组件未发现任何更改，因此无法提交该值。 redux状态没有被填充，我认为它正在发生，因为Field onchange事件没有被触发。我尝试将状态直接设置为onChange，但它不起作用（可能不应该）。

感谢您帮助这个菜鸟人。

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>

    );
}
}

这是我的wizardform代码：

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

Answer 1

我会使用方法change设置Redux商店中纬度字段的值，因此getMyLocation将如下所示：

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

你的领域将是：

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

查看沙箱here

Redux-form：根据另一个按钮点击触发fireld上的onChange事件

1 个答案: