在按键上反应重新渲染

Question

我什至不知道如何开始描述这一点，但是就这样吧。

我有一个问卷调查应用程序。
这包括一份问卷清单。
如果您单击问卷，则会打开问卷的模式窗口。
然后，此问卷模式有一个带有问题的轮播。
每个问题都是另一个组成部分，每个问题可以包含 4 个或更少的对象，例如（日期字段、下拉菜单和文本字段）

我的问题是，在文本字段中的每个 keyPress 上，React 都会重新渲染。
现在在此文本字段中，事件设置为 onBlur，但每次按键都会启动重新渲染。
此重新渲染会清除其所有值的表单一秒钟，但一旦我失去对文本字段的关注，它就会再次填充所有表单值。

我错过了什么？

"react": "^15.4.0",
"react-redux": "^4.3.0",

这里我开始在最后一个文本框中输入

Answer 1

您需要使用诸如useState/useReducer 之类的状态挂钩，以便在渲染之间保留状态。

然后，您可以直接从此状态控制字段的值。您还将通过处理 onChange/onBlur 事件来更新状态。

使用动态数量的行，您的状态的形状是一个对象数组。为了帮助实现这一点，您可能需要更高级的 useReducer 挂钩。

阅读有关如何实现 reducer 的文档，确保您：

1. 不要直接改变/改变状态

2. 通过发送actions改变状态

3. reducer 接受 current state 和 action 并通过表达式 you return 将状态同步更新到新状态。使用switch 语法切换各种动作类型和return 相应

4. 明智地标记您的行为，例如：{type: "new-row-added"}，或{type: "row-deleted", row: 2}，或{type: "row-updated", row: 3, update: { date: "2021-08-09" }}

学习 reducer 模式对于更复杂的状态更新非常有益，因为它会迫使您为自己构建 API，从而澄清事情。