带有分叉步骤的 ReduxForm 向导

Question

我正在尝试构建一个 reduxform，其中我有一个父页面，以及 step1、step2 组件，例如 site.

上的 redux 表单示例

第 1 步有一个包含 2 个值的下拉菜单 - 让我们说 'A' 和 'B' Step2 有几个表单输入详细信息如果我在步骤 1 下拉列表中有值 'A' - 我继续步骤 2 并向 nodejs/mongo 发出 post 请求并重定向到成功页面

（现在的主要问题：- 我如何执行以下操作）

如果我在步骤 1 中有值 'B' - 步骤 2 应该继续到步骤 3 - 然后在某个时候 post 到数据库等

如何拆分向导流程？非常感谢任何线索 - 我是 react/redux 和 reduxforms 的新手，并且在截止日期前.. 为“菜鸟”

道歉

Answer 1

onSubmit 函数接收正在提交的表单的值：

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

带有分叉步骤的 ReduxForm 向导

ReduxForm wizard with a forked step

redux-form

redux-form-validators