存储有关嵌套表单的数据的位置

时间:2015-07-22 06:20:09

标签: reactjs

我有一个包含嵌套项目的表单。所以我会有一个ListItem。由于来自item的回调,List有关于其项目的完整状态。其可管理的嵌套List知道提交的数据。

但是当我有ListOfList(或ListOfListOfList)的提交操作提交整个州时,会包含其中包含的所有列表和项目会发生什么?如何更新整个州的ListOfList以便可以提交提交动作?

我可以在创建新项目时调用List,然后调用ListOfList然后调用setState。但这是回调地狱。

示例数据(可以添加/删除项目,可以创建新/编辑列表)

Agent: Alice

Handwash 10 *urgent
Bleach 5
Mop 2 *urgent


Agent: Bob

Handwash 2
Bleach 2
Mop 2 *urgent

1 个答案:

答案 0 :(得分:0)

这是React的一个已知限制(或者更确切地说,React并不打算解决这个问题本身)。首先,我建议您阅读React文档中的以下文章:communicate between componentsexpose component functions

正如他们所说,对于父子通信,您可以将回调作为道具传递给子组件,以便在状态发生变化时调用它。在您的特定情况下,ListOfList会将方法传递给List作为List在更新时调用的支柱,将其最新状态作为参数传递(例如)。

也可以在子进程中公开一个返回其当前状态的方法(虽然这对我来说感觉很奇怪,但它当然可能),然后父进程可以通过{ {1}}。

对于其他组件关系,您可以设置一个事件广播系统,Facebook自己引入Flux pattern作为处理该事件的一种方式。

我还建议查看他们更新的提案Relay,该提案涉及数据提取和依赖关系。