1

我正在尝试构建一个 reduxform，其中我有一个父页面，以及 step1、step2 组件，例如网站上的 redux 表单示例。

Step1 有一个包含 2 个值的下拉列表 - 可以说是“A”和“B” Step2 有几个表单输入详细信息如果我在 step1 下拉列表中有值“A” - 我继续 step2 向 nodejs/mongo 发送请求并重定向到成功页面

（现在的主要问题： - 我该怎么做以下）

如果我在步骤 1 中有值“B” - Step2 应该继续到 Step3 - 然后在某个时候发布到 DB 等

如何拆分向导流程？任何线索都非常感谢 - 我是 react/redux 和 reduxforms 的新手，并且在最后期限内.. 为“菜鸟”道歉

4

1 回答 1

0

onSubmitfunc 接收正在提交的表单的值：

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>
    )
  }
}
于 2018-03-25T21:10:52.923 回答