使用 react、redux 和 redux-form 对字段进行内联编辑。我应该这样做吗？答案

【问题标题】：Inline editing of a field using react, redux and redux-form. Should I do it this way?使用 react、redux 和 redux-form 对字段进行内联编辑。我应该这样做吗？
【发布时间】：2018-01-03 22:02:58
【问题描述】：

我不想为整个可编辑对象打开表单，而是想从对象中创建单个字段的内联编辑。

我将 reactjs、redux 和 redux-form 用于我的其他表单，所以我认为最好的起点是尝试使用 redux-form 进行内联编辑。这将使我免于使用两种不同的方式进行验证、状态管理等。

但这意味着我将为每个可编辑对象创建一个表单，并为这些对象上的每个字段创建一个表单。它可能是数百种形式。除了这种方法会带来的可维护性问题之外，我想知道性能影响会是什么。在这种情况下 redux-form 会如何表现？这是否意味着将有数百个 reducer 监听 redux 存储中的每个操作，或者这些 reducer 仅在显示包含表单的页面时监听？

【问题讨论】：

您能否澄清一下“内联编辑”是什么意思？
我相信你知道 redux-form 支持字段名称中的点表示法，你也可以将表单部分创建为可重复的表单组件
通过内联编辑，我的意思是能够单击显示的值并将其更改为预先填充该值的输入字段。输入组件会有自己的提交和取消按钮。
我已经用一种工作示例更新了我的答案

标签： redux redux-form

【解决方案1】：

更新

我认为应该很有可能在编辑时为内联字段创建一个 redux-form 并在编辑停止时删除。

这是一个工作示例（打开开发工具以查看正在运行的操作） https://codesandbox.io/s/13nywm3k2j

表单提交后显然需要一些数据持久化机制

表单数据不一定要'flat'，可以借助点符号嵌套，比如

<Form>
  <Field name='title' />
  <Field name='object.title' />
  <Field name='object.mass' />
  <Field name='object.weight' />
</Form>

【讨论】：

感谢您的示例。如果我决定走 redux-form 路线，那将很有帮助。但我的主要问题是关于性能影响。我不熟悉 react 组件和 redux-form reducer 等的生命周期。这种方法会导致数百个操作被触发吗？
嗨！只有一个 redux 形式的 reducer，你使用 combineReducers 连接到 redux 的那个。在这个特定的例子中，实际的 redux-form 对象是在编辑开始时创建的，然后消失。一直以来，它只是一个纯文本字段（页面上可以有很多）。所以我看不到性能下降。当然，当您在字段内输入时，redux-form 总是在每次点击时将当前状态还原为新状态，但这就是它的工作原理
非常感谢，非常有帮助。