Question

我有一个非常复杂的多级深层/嵌套表单，使用reduxForm()连接到React / Redux。由于表单非常大，我已将其中的部分内容分解为子组件。其中一些组件需要访问Redux状态，因此需要通过props传递连接或connect()ed。但是，当我使用普通的Redux connect()函数连接子组件时，就无法编辑其中的redux-form字段。所以我尝试使用reduxForm()连接子组件以及父组件，这些组件感觉不对，但似乎有效。

但是我现在发现像removeField()这样的某些功能在连接的子组件中不起作用 - 例如child_form.removeField(index)删除所有child_form，而不仅仅是与索引匹配的那个。

将reduxForm()组件的子组件连接到redux状态的正确/最佳实践方法是什么？使用道具将所有内容传递到层次结构中会很快变得笨拙......

Answer 1

但是，我现在发现像removeField()这样的某些功能在连接的子组件中不起作用 - 例如child_form.removeField(index)删除所有child_forms，而不仅仅是与索引匹配的那个。{/ p>

有两种方法可以解决这个问题：

使用动作创建者

removeField方法包装removeArrayValue动作创建者。您可以发送此操作以删除表单的条目。
```
// Removes the 4th row
dispatch(removeArrayValue("myform", "myarrayfield", 3)) 
```
使用插件

在reducer插件中，您可以拦截操作并触发表单状态的修改。如果您发送操作，则可以拦截它并更新字段数组。

使用道具将所有内容传递到层次结构中会很快变得笨拙......

我已经看到了几个解决方法。

使用相同的表单名称创建多个表单。内部Redux表单将合并它们，以便您的商店包含同一对象中每个子表单的数据。
使用connect连接子表单并使用操作创建者来操纵状态。

将您的表单分成更小的部分并通过fields。 这是我最喜欢的解决方案。我们在我们的应用程序中成功完成了这项工作（超过一百种表格！）。

const MainForm = reduxForm({
  form: "main",
  fields: [
    SubForm1.fields,
    SubForm2.fields,
    SubForm3.fields,
  ]
})(
  props => (
    <form onSubmit={props.handleSubmit}>
      <SubForm1 fields={props.fields} />
      <SubForm2 fields={props.fields} />
      <SubForm3 fields={props.fields} />
      <button type="submit">Send</button>
    </form>
  )
)

const SubForm1 = ({fields}) => (
  <div>
    <TextField {...fields.foo} />
    <TextField {...fields.bar} />
  </div>
)

SubForm1.fields = ["foo", "bar"]

我应该如何将reduxForm的子组件连接到redux状态？

1 个答案: