帶有鏈接字段的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 。

希望能有所幫助。