Formik中onBlur与ErrorMessage无法协同工作问题求助

核心原因 #

你自定义的onBlur覆盖了Field组件默认的失焦处理逻辑，导致React Hook Form无法更新字段的touched状态；同时你的ErrorMessage代码存在语法错误，这两个问题共同导致错误提示无法正常显示。

修复步骤 #

1. 修正onBlur逻辑，确保始终触发内置handleBlur
   不要直接将onBlur设为isValid ? handleBlur : null，这样当isValid为false时，不会触发内置的handleBlur，字段的touched状态永远不会被标记为true，ErrorMessage也就不会显示。正确的做法是始终调用内置handleBlur，再根据isValid执行自定义逻辑：

   <Field
     id='name'
     name='name'
     placeholder='building'
     onBlur={(e) => {
       handleBlur(e); // 必须先调用内置handleBlur更新touched状态
       if (isValid) {
         // 这里写你原本要在isValid时执行的逻辑
       }
     }}
     className={`form-control ${
       touched.name && errors.name ? 'text-danger' : ''
     }`}
   />
   

2. 修复ErrorMessage的语法错误
   你提供的代码中className='text-d'未闭合且类名不完整，修正后：

   <ErrorMessage
     name='name'
     component='div'
     className='text-danger'
   />
   

内容的提问来源于stack exchange，提问作者jstaugaard