React/Redux：焦点在输入字段中丢失答案

【问题标题】：React/Redux: focus is lost in the input fieldReact/Redux：焦点在输入字段中丢失
【发布时间】：2020-02-13 08:57:19
【问题描述】：

在字段中输入文本时，焦点会丢失。为什么？

如果删除标签道具，那么问题就解决了。但是需要一个标签

<SimpleItem
  label={{ text: "Your Address" }}
  dataField="surname"
  editorOptions={{
    value: formEdit.surname,
    onValueChanged: ({ value }) => {
      addChange("surname", value);
    },
    valueChangeEvent: "keyup"
  }}
/>;

在线演示： https://codesandbox.io/s/de-form-ezmmg

【问题讨论】：

一般来说，就 React 而言，输入失去焦点是由输入重新渲染引起的，因此它在技术上是一个不同的元素，因此失去了焦点。这通常可以通过查看在输入过程中发生什么样的重新渲染并确保它们只在需要的地方发生，或者为输入元素提供键以便它们可以被 React 正确识别和持久化来解决
请使用此问题的示例说明如何执行此操作。如果不使用标签道具，我不明白为什么会发生这种情况:(

标签： javascript reactjs redux react-redux devextreme

【解决方案1】：

我注意到，当使用Label 作为SimpleItem 的子项（而不是道具）时，输入不会失去对 keyup 事件的关注（我尝试在文档中挖掘，但找不到原因这会发生）：

<SimpleItem
  dataField="surname"
  editorOptions={{
    value: formEdit.surname,
    onValueChanged: ({ value }) => {
      addChange("surname", value);
    },
    valueChangeEvent: "keyup"
  }}
>
     <Label text="Your Address" />
</SimpleItem>

Code Sandbox

【讨论】：

难以置信，但效果很好！面临一个问题，如果大量数据进入输入字段，那么在输入过程中速度会变慢。也许我没有正确设置商店以使用表单？示例：g.recordit.co/TJudzIBo9l.gif
您是否对每个按键都执行任何其他操作？也许从服务器获取数据？我在以下Code Sandbox 中添加了许多字段，它没有性能问题
一切都好！我没有将所有项目的标签更改为子项，大约还剩下两个。因此存在性能问题

【解决方案2】：

就像 jaycee 讨论的领域一样，每当您键入时都会重新渲染。我试图将事件更改为模糊。尝试这个。希望对你有帮助。

【讨论】：

您是否尝试更改“您的姓名”字段？当更改值未打开 SaveBar 组件时，您的更改似乎不合逻辑。
没有模糊。需要跟踪字符的每次更改以显示保存栏。例如在 keyup 事件中