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

Posted 2023-03-05

【中文标题】Formik：useField 钩子上的 onBlur 处理程序

【英文标题】：Formik: onBlur handler on useField hook

【发布时间】：2020-03-21 07:09:59

【问题描述】：

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

你好！

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

我需要什么❓

具有 isFocused 状态的功能组件 用onFocus 和onBlur 更改它 根据状态，改变占位符的位置

????开始做

为此，我使用useField()hook 制作了一个组件CustomField。工作，酷????

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

准备好的沙盒？？？ Sandbox

????请告诉我我错过了什么和在哪里，如何实施？谢谢！

【参考方案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

【参考方案2】：

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

谢谢Kinbaum！

在您的handleBlur 函数中，您可以调用field.onBlur 并将合成事件传递给它。 像这样的：

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

【讨论】：

如何在输入字段上显示错误 onBlur 事件，我用于用户名检查，如何在输入字段上设置错误。