Formik：useField 挂钩上的 onBlur 处理程序

Question

onBlur 处理程序和 useField 挂钩的实时验证

您好！

我开始学习和练习 Formik，但 运行 遇到了一个问题。我的项目使用随焦点字段向上移动的自定义占位符。

我需要这个吗❓

• 具有 isFocused 状态的功能组件
• 将其更改为 onFocus 和 onBlur
• 根据状态，改变占位符的位置

开始做

为此，我制作了一个带有 useField() 挂钩的组件 CustomField。作品，很酷

但后来他注意到实时验证和错误消息停止工作了‍♂️。因为我重新定义了 onBlur 处理程序。经过搜索，研究问题没有找到在不干扰Formik的情况下使用onBlur handler的解决方案。

准备好的沙盒Sandbox

请告诉我我漏掉了什么和漏掉了什么地方，如何实现？谢谢！

Answer 1

不确定这是否是最佳解决方案。

我的解决方法是继续使用 formik 提供的 onBlur 函数，同时也使用您的函数。这是通过将字段 onBlur 函数传递给 handleBlur 函数并在执行时调用它来完成的。您可以看到此沙箱中的更改。

所以这两个区域的变化就是这条线

onBlur={e => handleBlur(field.onBlur, e)}

和

  function handleBlur(formikBlur, event) {
    if (!(field.value.length > 0)) {
      onFocus(false);
    }
    formikBlur(event);
  }

使用 formik onBlur 函数:D 祝你好运

这里是代码沙箱

https://codesandbox.io/s/agitated-gagarin-g07zk?fontsize=14&hidenavigation=1&theme=dark

Answer 2

另一种解决方案，它们是一样的，但是这个选项更漂亮，更易读！

谢谢Kinbaum！

In your handleBlur function, you can call field.onBlur and pass the synthetic event to it. Something like this:

function handleBlur(e) {
    // Call the Formik onBlur event before your custom stuff
    field.onBlur(e);

    if (!field.value.length > 0) {
        onFocus(false);
    }
}

GitHub Issue Answer

工作代码Sandbox Link