将Formik封装为可复用子组件后，输入框打字时频繁失焦

你遇到的输入框持续失焦问题，核心原因是封装的Formik组件被定义在了父组件的函数内部，导致每次父组件状态更新时，都会创建一个全新的组件类型。React会识别这是不同的组件，进而卸载旧组件、重新挂载新组件，输入框的DOM被重建，自然就失去了焦点。

解决步骤： #

• 将可复用的Form组件提取到父组件外部定义，确保组件类型在每次渲染时保持一致。

错误写法示例：

function App() {
  // 错误：组件定义在父组件内部，每次渲染都会生成新的组件引用
  const MyForm = () => (
    <Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
      <Field name="email" placeholder="邮箱" />
    </Formik>
  );

  return <MyForm />;
}

正确写法示例：

// 正确：组件定义在父组件外部，组件引用固定
const MyForm = ({ initialValues, onSubmit }) => (
  <Formik initialValues={initialValues} onSubmit={onSubmit}>
    <Field name="email" placeholder="邮箱" />
    <button type="submit">提交</button>
  </Formik>
);

function App() {
  const initialVals = { email: "" };
  const handleSubmit = (values) => {
    console.log("提交的值：", values);
  };

  return <MyForm initialValues={initialVals} onSubmit={handleSubmit} />;
}

这样修改后，React会复用组件实例，输入框的DOM不会被频繁重建，输入时就不会再失去焦点了。

内容的提问来源于stack exchange，提问作者stackdisplay