React-final-form - 每次击键后输入失去焦点答案

【问题标题】：React-final-form - input losing focus after every keystrokeReact-final-form - 每次击键后输入失去焦点
【发布时间】：2020-02-04 20:06:56
【问题描述】：

import React from "react";
import { Field, Form } from "react-final-form";

export function LogInDialog(props: { open: boolean; onClose: () => void }) {
  const onSubmit = vals => {
    alert(JSON.stringify(vals));
  };
    console.log("logindialog");
  return (
    <Form
      key="unique_key_0"
      onSubmit={onSubmit}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit} key="unique_key_1" id="unique_id_1">
          <Field
            key="unique_key_2"
            id="unique_id_2"
            name="email"
            component={({ input: { onChange, value }, label }) => (
              <input
                key="unique_key_3"
                id="unique_id_3"
                type="text"
                value={value}
                onChange={onChange}
              />
            )}
          ></Field>
        </form>
      )}
    />
  );
}

每次击键后输入都会失去焦点。在 devtools 中，我可以看到 HTML form 每次都重新创建（它闪烁粉红色）。然而，React 组件本身只渲染一次。

有类似的问题，但所有问题都建议使用唯一键。这样的解决方案似乎在这里不起作用。

为什么输入会一次又一次地失去焦点？我该如何解决？

https://codesandbox.io/s/busy-torvalds-91zln

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

由于组件使用了内联 lambda，因此它的标识在每次渲染时都会改变。

虽然根据许多其他问题，唯一的密钥应该就足够了，但将 component 函数移到主组件之外可以完全修复它。

【讨论】：