我应该在哪里更新复杂 React.js 表单的状态？

Question

我正在尝试解决 "simple" react/flux 架构，我需要一些建议。基本上，我想深入了解最佳实践和通量实施。

我确实在 react.js 中实现了简单的全状态表单。

我的表格的基本结构接近

<Form>
    <Input name="foo" value={this.name} onChange=... />
    {items.map (i) => <Item model={i} onChange=... onRemove=... />}
    <Input name="sum" value={this.sum} onChange=... />
</Form>

状态类似于

{ name: "Bar Baz", items: List.of(new ItemRecord(...)), sum: 10 }

sum 状态的属性是根据 items 列表计算的。

注意：两者 form/state 都是简化的，在现实生活中大约有 20 个输入字段。

目前我的顶级组件 <Form> 存储每个 input/child 组件的当前状态。您可以看到我正在向 <Item> 组件提供 onChange 属性，如果用户更改 <Item> 组件 onChange 回调将被调用，并且 ItemRecord 已更新，重新计算总和并在 Immutability Helpers.

的帮助下设置新状态

我希望你已经知道它目前是如何工作的。

编辑：我忘了说，<Item> 组件是无状态的，只需调用 parent.onChange 并提供一些额外信息。

我想知道这是否是表单的好方法，因为我目前正在考虑基于 Flux 体系结构的一些不同之处。

我会将 <Form> 组件的状态移到外部 FormStore。状态（或其一部分）将表示为 FormRecord（Immutable.js 记录）。现在，ItemRecord 也应该被提取到 ItemStore 中。另外，我会有一些方法，例如getStateFromStore() 将数据连接在一起并设置为 <Form>.

的状态

我应该如何处理 <Form> 输入的变化？我是否应该向商店调用 Input.onChange 一些操作，这将更新 FormRecord ？更新后，它将触发一些正在侦听 <Form> 组件的事件，并且它将根据 getStateFromStore() 设置当前状态？我想，我也应该用 ItemStore 做一些类似的事情。

你怎么看，这种在 React 中实现表单的好方法吗？或者我应该采用无状态方式（但我希望在将来实时更新 sum 和一些实时验证）并解析表单提交上的状态？

性能如何，用户输入时不会出现输入延迟吗？

感谢您的宝贵时间。

PS: 对不起我的英语，希望你能理解我的意思。

Answer 1

听起来你走对了路。项目应该更新商店中的状态。然后商店将状态作为道具传递给表单。表单将每个道具传递给项目。拥有一个表单存储是有意义的。这是"one-way data flow"。

不，输入不滞后。我们已经完成了一个复杂程度为 Google 文档的复杂 Web 应用程序，而且它的性能非常好。另外，这很容易推理。这就是 React 的全部意义所在。

我应该在哪里更新复杂 React.js 表单的状态？

Where should I update state of my complex React.js form?

reactjs

reactjs-flux