redux-form动态向导

Question

我正在尝试创建一个具有动态步骤数的向导(表单)(使用redux-form)。在每个步骤中，用户可以转到向导的最后一步，也可以添加额外的步骤。

一个示例是用于订购可自定义项目的向导。向导的每个步骤都包含用于配置项目的所有字段。然后，用户可以添加另一个项目并对其进行配置，或者转到结帐(向导的最后一步)。

我正在遵循Wizard example，但我不确定如何动态添加步骤。我试着把它和FieldArray混在一起，但没有成功。

有什么帮助吗？

Answer 1

我也为我的工作做了类似的事情。对于您的情况，如果用户在同一个页面上选择了某个答案，您可以只进行条件呈现以显示下一个页面/动态值。

我的例子也有条件渲染。我不得不使用formValueSelector API来访问不同页面上的表单值。下面是redux-form示例向导中修改过的向导代码。如果你在第二页选择男性，你会在第三页得到最喜欢的颜色下拉问题。如果你选择女性，你会得到一个受雇复选框问题。

我将条件变量设为isMale，并根据男性答案是否为真返回不同的字段。我相信有更优雅的方法来做到这一点，但这是一种对我有效的方法。

https://codesandbox.io/s/34jp9rqp71

我只是修改/添加了代码的这些部分。

WizardFormThirdPage.js

import { Field, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";

let WizardFormThirdPage = props => {
  const { sex, handleSubmit, pristine, previousPage, submitting } = props;
  var isMale = sex == "male" ? true : false;

  return (
    <form onSubmit={handleSubmit}>
      {isMale && (
        <div>
          <label>Favorite Color</label>
          <Field name="favoriteColor" component={renderColorSelector} />
        </div>
      )}
      {!isMale && (
        <div>
          <label htmlFor="employed">Employed</label>
          <div>
            <Field
              name="employed"
              id="employed"
              component="input"
              type="checkbox"
            />
          </div>
        </div>
      )}
      . . .
    </form>
  );
};

const mapStateToProps = state => ({
  sex: formValueSelector("wizard")(state, "sex")
});
WizardFormThirdPage = connect(mapStateToProps)(WizardFormThirdPage);