为什么 formik 在我击中第二个字段时立即失去焦点？

Question

我有一个 formik 的表单在第二个字段失去焦点。

好像是很基础的东西，但是我找不到问题。

检查这个沙箱：https://codesandbox.io/s/create-react-app-forked-m145g

点击电子邮件字段，输入任何内容（或什么都不输入），点击 Tab 键跳转到下一个字段，然后看着焦点消失。

如您所见，该字段正在验证中，因此，我不知道（并且发现不太可能）我的自定义 handleBlur 函数是否与它有关：

const customHandleBlur = (e) => {
  if (!values.recaptcha) this._reCaptchaRef.current.execute();
  handleBlur(e);
};

这个函数负责执行Google的recaptcha v3.

我做错了什么？

Answer 1

尝试将您的 customHandleBlur 更改为仅在电子邮件和描述都具有值时才执行。

  const customHandleBlur = (e) => {
     if (!!values.email && !!values.description && !values.recaptcha) this._reCaptchaRef.current.execute();
    handleBlur(e);
  };

这将防止描述在调用 this._reCaptchaRef.current.execute() 函数时失去焦点。

看起来还有其他问题...但这将使您的描述字段不会失去焦点，这正是您的问题所在。

为什么 formik 在我击中第二个字段时立即失去焦点？

Why formik is losing focus immediatelly I hit the second field?

reactjs

formik