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