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

我使用reduxForm()连接到React/Redux上，有一个相当复杂的多级深层/嵌套窗体。由于表单非常大，我已将其中的一部分分解为子组件。其中一些组件需要访问Redux状态，因此需要通过道具传递连接，或者需要connect()ed。但是，当我使用正常的Redux connect()函数来连接子组件时，无法编辑它们中的redux-form字段。所以我尝试使用reduxForm()连接子组件以及父母，这感觉不对，但似乎工作。我应该如何将reduxForm的子组件连接到redux状态？

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

将reduxForm()组件的子组件连接到redux状态的正确/最佳实践方法是什么？通过使用道具层次传递一切都会变得很难非常快...

来源

2016-06-08 DrMeers

我想我一定是有一些东西与其他配置出错 - 这个问题后不改变任何上述的解决！ – DrMeers

但是我现在发现，像removeField()一些功能不是在连接子的工作 - 例如child_form.removeField(index)删除所有child_forms，而不仅仅是与索引匹配的那个。

还有就是要解决这个双向的：

用行动创造者

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

在减速插件，您可以拦截行动，并触发形式的状态修改。如果您分派一个动作，您可以拦截它并更新该字段数组。通过使用道具层次

传递一切都将很快变得难以处理...

我见过几个办法解决这个。

使用相同的表单名称创建多个表单。内部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"]

来源

2016-06-09 06:44:49 Florent

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

回答

相关问题