输入后输入失去焦点

Question

我有两个问题：

1. 在我输入输入后输入失去焦点
2. 我在控制台中收到错误消息，提示我需要为 renderFields 设置唯一键，而我拥有唯一键！ 我在这里加载了代码： https://codesandbox.io/s/autumn-cookies-qkzfz

提前感谢您的回答。

Answer 1

这两个问题密切相关。

在您键入组件时发生错误 1. 是随机生成的 uuid（特别是 key={uuidv4()}）。

导致输入失去焦点的原因是，每次输入发生更改时，您都会更新状态，这将使用新键重新渲染组件（因为uuidv4() 再次运行）。

当这种情况发生时，React 不知道用户仍在输入同一个组件，因为键不同（因为已生成新的 UUID）所以它无法正确识别哪个组件具有焦点。

您可以使用一致的密钥来解决此问题。如果您的字段有 id，请使用它。拥有一致的唯一键将防止输入失去焦点。

要删除警告，请确保所有您的退货都有唯一的密钥。现在只有text 的情况有一个关键道具。为其他可能的情况添加键，错误就会消失。

另外你 switch 有一个default: break - 而不是在这里返回 null 然后没有为 switch 的每个可能结果返回。