如何在不从道具初始化状态且不使用通量的情况下进行集合编辑控制？答案

【问题标题】：How to make collection-editing control without initializing state from props and not using flux?如何在不从道具初始化状态且不使用通量的情况下进行集合编辑控制？
【发布时间】：2015-09-16 17:50:34
【问题描述】：

所以我有一个相当简单的控件，您可以在其中获取电子邮件地址列表作为道具，并为每个输入框生成一个输入框列表，并具有添加电子邮件收件箱或删除现有收件箱的额外功能。

所以这在概念上的工作方式是

从 props 数组初始化状态数组
对于状态中的每个字符串
- 使用当前项目的 defaultValue 生成电子邮件输入
- 生成删除按钮。单击时从状态数组中删除此索引处的项目
生成一个添加按钮。单击时将新的空字符串添加到状态数组

我了解整个通量模型应该如何处理上游发送事件和重新渲染道具。但是我在这里没有使用助焊剂风味的任何东西。这是一个简单的 html 表单。

没有intitialize state from props 的正确方法是什么？

【问题讨论】：

标签： reactjs

【解决方案1】：

例如，可以传递 initialValues 之类的 prop，并将其设置为 getInitialState 中的默认状态。那么很明显，prop 只是用作初始状态（它设置一次，在组件挂载时），实际状态是组件本身的责任。

React 文档中有一个关于处理表单的条目可能会有所帮助：

https://facebook.github.io/react/docs/forms.html

【讨论】：

是的，我读了很多遍，但是当您添加或删除时会发生什么？必须在某处反映支持模型的更改，否则渲染将不会生成正确的输入。因为我没有使用通量（主模型不关心这个）它必须处于状态 - 那么如果不是我修改的道具的副本，状态会怎样？然后我从道具初始化状态...
决定状态所属的地方，添加或删除时，不能改变默认状态的props来自的根/父组件的状态吗？
为什么状态不属于这个组件？
如果状态属于组件，那么您可以从组件状态中添加/删除数组条目，还是我在这里遗漏了什么？
使用 prop 来初始化 just 默认值是可以的，而不是作为组件生命周期中的真实来源。

【解决方案2】：

我想我找到了正确的答案。在这种方法中，您可以将状态设置为“用户操作”数组，例如。

[
   {action: 'add'},
   {action: 'modify', index: 1, newValue: 'fred.flinstone@brock.com'},
   {action: 'modify', index: 2, newValue: 'barney.rubble@brock.com'},
   {action: 'remove', index: 0},
]

单击按钮或更改输入将向此数组添加一个条目。然后，您对每个属性的绑定将采用初始道具，并减少状态操作以找出当前状态。

现在是 感觉不错的版本。这也是很多工作。正如@Eelke 指出的那样，当你的道具不是“当前”状态时，指南有一个警告，就像“初始状态”一样。在这种情况下，我认为实际上确实从这里的道具初始化状态是有意义的。

【讨论】：