为 redux-form 向导动态创建页面答案

【问题标题】：Dynamically create pages for redux-form wizard为 redux-form 向导动态创建页面
【发布时间】：2018-02-08 09:56:05
【问题描述】：

我正在尝试基于 Redux 表单 - 向导示例 (https://codesandbox.io/s/0Qzz3843) 构建表单。在问卷的第一页，我有一组选项（复选框）。我希望能够根据用户在第一页上选择的内容生成后续页面。例如，如果用户从选项 A-J 中选择选项 A、B 和 F，则后续页面将分别仅是针对 A、B 和 F 的问题。这些后续页面将具有相同的字段集（标题、描述、预算）。

我确信我只需要为这组字段创建一个组件，再加上另一个组件，我需要能够为第一页中设置的每个状态（选项）动态生成页面。

我认为每个 case 没有中断的 switch/case 可能会起作用（在我的包装器组件中实现），但是会有更优雅的方法吗？

我对此很陌生，非常感谢有关一些代码的指示/建议/帮助。非常感谢！

【问题讨论】：

标签： reactjs redux redux-form

【解决方案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);

【讨论】：