Formik切换至第二个字段时立即失焦的问题排查求助

我仔细看了你的问题描述和相关代码片段，这个焦点丢失的问题和你自定义的customHandleBlur函数关系不大，核心根源是你在Formik的<Field>组件中使用了内联定义的输入组件，导致每次组件渲染时都会生成全新的组件类型，React会卸载旧的输入框并重新挂载新的实例，自然就丢失了焦点。

具体原因分析 #

当你在<Field>里采用内联函数定义组件时（类似下面的写法，结合你的沙箱场景）：

<Field
  name="email"
  component={() => <input type="email" />}
/>

或者把自定义输入组件的定义放在了父组件的渲染函数内部，每一次状态更新（比如输入内容触发Formik的值变化、验证逻辑执行）都会让React重新创建这个组件的引用。旧的输入框组件被销毁，新的输入框组件被挂载，焦点自然无法保持。

解决方案 #

你需要把输入组件提取成一个独立的、稳定的组件，而非内联定义：

1. 先定义一个可复用的输入组件：

const InputField = ({ field, form, ...props }) => {
  return <input {...field} {...props} />;
};

2. 然后在<Field>中直接引用这个稳定的组件：

<Field
  name="email"
  component={InputField}
  type="email"
/>
<Field
  name="password"
  component={InputField}
  type="password"
/>

这样组件的引用在每次渲染时都是固定的，React只会更新组件的props，而不会卸载重建输入框实例，切换字段时焦点就能正常保持了。

关于你的customHandleBlur #

这个函数本身的逻辑没有问题，它只是在blur事件触发时执行reCAPTCHA，再调用Formik原生的handleBlur，不会导致焦点丢失，你可以放心保留它。

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