React-final-form

Question

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

Answer 1

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

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

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

React-final-form - input losing focus after every keystroke

reactjs