forms - 带有链接字段的 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被定义为 a 的一部分form。

只要您在传递给函数的对象field内部使用相同的常量，并且只要for 形式相同，以便它们使用相同的底层表单对象，它就可以正常工作。fieldsreduxFormvalue

在一页上你应该传入

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

然后在另一页上：

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

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

希望有帮助。