Question

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

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

我认为每个案例都没有中断的开关/案例可能有用（在我的包装器组件中实现），但是有更优雅的方法吗？

我对此非常陌生，非常感谢某些代码的说明/建议/帮助。非常感谢！

Answer 1

我必须使用formValueSelector API来访问不同页面上的表单值，然后使用条件渲染来显示不同页面。

这是redux形式的示例向导中修改后的向导代码。如果在第二页上选择“男性”，则会在第三页上出现“收藏夹颜色”下拉问题。如果选择女性，则会出现一个就业复选框问题。

我做了一个isMale的条件变量，并根据male答案是否正确返回不同的Field。我敢肯定有更优雅的方法可以做到这一点，但这是对我有用的一种方法。

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

动态创建redux-form向导的页面

1 个答案: