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-每次击键输入都会失去焦点

1 个答案: