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

Question

我正在使用React构建一个多步骤的申请表。首先用纯内部状态构建它我现在正在使用redux-form重构Redux。

以这里的例子为基础：http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a我们已经有了一个好方法。

但是当我有两个应该具有相同值的表单时，会出现问题。在其中一个页面中，我有一个名称字段，应该在下一页的名称字段中复制。如果你从最后一页回来，会发生相反的情况。有关如何实现这一目标的任何提示？

Answer 1

使用向导，您基本上使用的是完全相同的表单，它可以分成多个部分。最终它是相同的形式，因为redux-form按名称跟踪它们。这是库如何识别相同形式的片段 - 使用名称。

form: 'wizard',

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

的一部分

只要在传递到field函数的fields对象中使用相同的reduxForm常量，并且只要表单的value相同，所以他们使用相同的底层表单对象，它应该适合你。

在一页上你应该传入

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

然后在另一页上：

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

另外，如果您想要来回导航，请确保destroyOnUnmount等于false。

希望有所帮助。