Javascript Redux表单：如何在向导表单上设置初始值？

我有一个字段

位置

，这是API的必填字段，因此不能空白提交。因此，我尝试将字段的

0

设置为

initialValue

。

Location

字段位于表单的第二步，在

WizardFormSecondPage

上设置

initialValues

，将从状态中删除所有以前输入的数据。如何设置

位置

字段的

初始值

，并将所有数据保存在第一步中

位置组件：

export class GetLocation extends Component{
constructor(){
    super();
    this.getMyLocation = this.getMyLocation.bind(this);
}


getMyLocation = () => {
    const location = window.navigator && window.navigator.geolocation;

    if (location) {
        location.getCurrentPosition((position) => {
            this.props.onLocationChanged(position.coords);
        },
            (positionError) => {
            console.log(positionError.message);
            this.props.onLocationChanged("0")
        },{maximumAge:0, timeout: 60000})
    } else {
        console.log();
        this.props.onLocationChanged("0")
    }
};

render(){
    return(
        <div>
            <p>Your location is </p>
            <Field
                name="latitude"
                component="input"
                className="form-control" initialValues={0.0}
            />
            <Field
                name="longitude"
                component="input"
                className="form-control"
            /><br/>
            <button type="button" className="btn btn-success" onClick={this.getMyLocation.bind(this)}>Get Geolocation</button>
        </div>

    );
}

导出类GetLocation扩展组件{
构造函数（）{
超级（）；
this.getMyLocation=this.getMyLocation.bind（this）；
}
getMyLocation=（）=>{
const location=window.navigator&&window.navigator.geology；
如果（位置）{
位置。getCurrentPosition（（位置）=>{
此.props.onLocationChanged（position.coords）；
},
（位置错误）=>{
控制台日志（位置错误消息）；
此.props.onLocationChanged（“0”）
}，{maximumAge:0，超时：60000}）
}否则{
console.log（）；
此.props.onLocationChanged（“0”）
}
};
render（）{
返回(
你的位置是



获取地理位置
);
}

}

向导表单第二页

 let WizardFormSecondPage = props => {
 const { handleSubmit, previousPage} = props;
 const onLocationChanged = (loc) => {
    props.change('location.latitude', loc.latitude);
    props.change("location.longitude", loc.longitude);
};

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="row">
          <div className="col-sm-12">
              <p className="label-lead">Own Address</p>
                 <FormSection name="location" component={Address}>
                    <Address />
                </FormSection>

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

  <div className="clearfix">
      <button type="button" className="previous pull-left btn btn-default" onClick={previousPage}>
        Previous
      </button>
      <button type="submit" className="next pull-right btn btn-primary">
        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);

让WizardFormSecondPage=props=>{
const{handleSubmit，previousPage}=props；
const onLocationChanged=（loc）=>{
道具更改（'位置.纬度'，位置.纬度'）；
道具。改变（“位置。经度”，位置。经度）；
};
返回(
位置
自己的地址
位置坐标

以前的
下一个
);
};
导出默认reduxForm({
表格：“向导”，//结果证明，我的方法是错误的。我可以将
初始值设置为整个
WizardForm
，它不会再次初始化。因此，我没有尝试设置初始化
WizardFormSecondPage
，而是必须在
WizardForm.js
上设置值。这是我的
WizardForm.js
：

class WizardForm extends Component {
  constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
      page: 1,
    };
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 });
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 });
  }

  onSubmit(values, dispatch) {
    return dispatch(saveData(values));
    // Call the action creator which is responsible for saving data here.
  }

  render() {
    const { onSubmit } = this.props;
    const { page } = this.state;
    return (
      <div>
        {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />}
        {page === 2 &&
          <WizardFormSecondPage
            previousPage={this.previousPage}
            onSubmit={this.nextPage}
          />}

        {page === 3 &&
          <WizardFormPreview
            previousPage={this.previousPage}
            onSubmit={this.onSubmit}
          />}
      </div>
    );
  }
}

WizardForm.propTypes = {
 onSubmit: PropTypes.func.isRequired,
};

// this part sets the initial values. connect if you need store.
WizardForm = reduxForm ({
  form: 'wizard',
  initialValues: {
    location: {
     latitude: "0.0",
     longitude: "0.0"
   }
  }
})(WizardForm)


export default WizardForm; 

类向导表单扩展组件{
建造师（道具）{
超级（道具）；
this.nextPage=this.nextPage.bind（this）；
this.previousPage=this.previousPage.bind（this）；
此.state={
页码：1，
};
}
下一页（）{
this.setState（{page:this.state.page+1}）；
}
上一页（）{
this.setState（{page:this.state.page-1}）；
}
onSubmit（值、分派）{
返回分派（保存数据（值））；
//调用负责在此处保存数据的操作创建者。
}
render（）{
const{onSubmit}=this.props；
const{page}=this.state；
返回(
{page==1&&}
{page==2&&
}
{page==3&&
}
);
}
}
WizardForm.propTypes={
onSubmit:PropTypes.func.isRequired，
};
//此部件设置初始值。如果需要存储，请连接。
WizardForm=reduxForm({
表单：“向导”，
初始值：{
地点：{
纬度：“0.0”，
经度：“0.0”
}
}
})（表格）
导出默认向导表单；
添加了完整的
WizardFormSecondPage
code（为了简洁起见，省略了一些字段）。