React Formik：自定义onBlur覆盖默认touched行为导致ErrorMessage不显示

问题根因 #

你自定义的onBlur事件直接覆盖了Formik Field组件自带的默认onBlur逻辑：Formik默认的onBlur会调用内部的handleBlur方法，完成两个核心动作：1. 将当前字段标记为touched（已触碰）状态；2. 触发对应字段的校验规则。而ErrorMessage组件默认仅在对应字段touched = true且存在校验错误时才会渲染提示内容，你没有调用默认的handleBlur，字段永远处于未触碰状态，因此错误信息无法展示。

解决方法 #

在所有自定义onBlur逻辑的最开头，先调用Formik注入的handleBlur方法，传入事件对象e保留默认行为，再执行你自己的业务逻辑即可。

以姓名输入框为例，修改后的Field代码如下：

<Field 
  onBlur={(e) => {
    // 先执行Formik原生handleBlur，保留校验和touched标记逻辑
    props.handleBlur(e);
    // 再执行你的自定义逻辑
    if(!props.errors.name){
      setCheckMarkName(true)
    }
  }} 
  name="name" 
  className={checkMarkName ? "form-control form-control-green" : "form-control"} 
  type="text" 
/>

其余所有添加了自定义onBlur的Field组件都按照相同逻辑修改即可恢复ErrorMessage的正常展示。

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