为什么 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);
};

这个函数负责执行谷歌的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() 函数时失去焦点。

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