Question

我尝试使用动态步数（使用redux-form）创建向导（表单）。在每一步中，用户都可以转到向导的最后一步或添加额外的步骤。

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

我跟随Wizard example，但我不确定如何动态添加步骤。我尝试将它与FieldArray混合起来但没有成功。

任何帮助？

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 个答案: