具有分叉步骤的ReduxForm向导

这个 onSubmit func接收要提交的表单的值:

onSubmit(values, dispatch, props)

在示例中,每个步骤使用相同的形式 'wizard' 所以 values 包含所有向导步骤的状态。您可以使用此选项确定下一步:

class WizardForm extends Component {
  constructor(props) {
    super(props)
    this.firstPageSubmit = this.firstPageSubmit.bind(this);
    this.secondPageSubmit = this.secondPageSubmit.bind(this);
    this.thirdPageSubmit= this.thirdPageSubmit.bind(this);
    this.state = { page: 1 };
  }
  firstPageSubmit(values) {
    this.setState({ page: 2  });
  }
  secondPageSubmit(values) {
    if(values.dropdown == 'A') {
      // post request to nodejs/mongo and redirect to a success page
    } else {
      this.setState({ page: this.state.page - 1 });
    }
  }
  thirdPageSubmit(values) {
    // at somepoint post to DB etc
  }

  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
      <div>
        {page === 1 && <WizardFormFirstPage onSubmit={this.firstPageSubmit} />}
        {page === 2 && <WizardFormSecondPage onSubmit={this.secondPageSubmit} />}
        {page === 3 && <WizardFormThirdPage onSubmit={this.thirdPageSubmit} />)}
      </div>
    )
  }
}