带有链接字段的 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.

的一部分

只要您在传递给 reduxForm 函数的 fields 对象中使用相同的 field 常量，并且只要表单的 value 是相同，因此它们使用相同的底层表单对象，它应该适合您。

在一页上你应该传入

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

然后在另一页：

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

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

希望对您有所帮助。

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

redux-form Wizard form with linked fields

forms

redux

redux-form