带有链接字段的redux-form向导表单

Question

我正在用React构建一个多步骤的应用程序表单。 首先使用纯内部状态构建它，现在我正在使用redux-form重构为Redux。

以此处的示例为基础： http : //redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a，我们已经找到了一个很好的方法。

但是，当我有两个具有相同值的表格时，就会出现问题。 在其中一个页面中，我有一个名称字段，应该在下一页的名称字段上重复该名称字段。 如果您从上一页返回，则应相反。 如何实现此目标的任何提示？

Answer 1

使用向导，您基本上可以使用完全相同的形式，将其分为多个部分。 最终，它是相同的形式，因为redux形式会按名称跟踪它们。 库就是使用名称来识别相同形式的片段的方式。

form: 'wizard',

在这里，您可以看到表单的完全相同的实例将在整个块中共享。 fields以类似的方式工作。 每个field都定义为form一部分。

只要您在传递给reduxForm函数的fields对象内使用相同的field常量，并且只要form的value相同，以便它们使用相同的基础form对象，它就可以正常工作。

在一页上您应该传递

export default reduxForm({
  form: 'wizard',
  fields : {
     'fieldIWantOnBothPartsOfTheForm',
     'someOtherFieldThatShouldOnlyBeHere',
  },
  ...

然后在另一页上：

export default reduxForm({
  form: 'wizard',
  fields : {
     'fieldIWantOnBothPartsOfTheForm',
     'thirdFieldHere',
  },
  ...

此外，如果要来回导航，请确保将destroyOnUnmount保持等于false 。

希望能有所帮助。