Question

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

Step1有2个值的下拉列表 - 让我们说'A＆＃39;和＆＃39; B＆＃39; Step2有几个表单输入细节如果我有价值＆＃39; A＆＃39;在step1下拉列表中 - 我继续step2，向nodejs / mongo发送请求并重定向到成功页面

（现在的主要问题： - 我如何做以下）

如果我有价值＆＃39; B＆＃39;在步骤1中 - Step2应继续执行Step3 - 然后在某个时间点发布到DB等

如何拆分向导流程？任何领导者都非常感激 - 我很快就会做出反应/减少和减少以及在截止日期前做出新闻......对于“noob＆＃39; ness”的道歉

Answer 1

The onSubmit func receives the values of the form that is being submitted:

onSubmit(values, dispatch, props)

In the example each step uses the same form 'wizard' so values contains the state from all wizard steps. You can use this to determine the next step:

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

具有分叉步骤的

1 个答案: