Formik实现即时反馈输入框仅onBlur生效，如何改为onChange触发

问题根因 #

• Formik 默认的 validate 函数触发时机包含 onBlur 事件，你当前的逻辑依赖 validate 修改 values.correct 才更新样式，自然只有失焦时才会触发样式变更。
• 直接在 validate 函数内修改 values 不符合 Formik 设计规范，validate 仅用于返回错误对象，不应该直接修改状态，也无法保证修改后能触发实时重渲染。

最优解决方案 #

不需要依赖 validate 函数实现样式判断，直接基于输入值和预定义答案实时计算输入框类名即可，天然支持 onChange 实时更新：

// 输入框className绑定逻辑
className={`base-input ${
  values.userInput === values.answer 
    ? 'success-green' // 完全匹配时绿色
    : values.answer.startsWith(values.userInput)
      ? 'default-gray' // 是前缀时灰色
      : 'error-red' // 其余情况红色
}`}

若必须使用validate实现的修正方案 #

1. 先确保 Formik 配置开启 validateOnChange: true（默认值为true，若你之前手动关闭需要打开）
2. 不要在 validate 内修改 values，改为将校验结果存入 errors 对象：

const formik = useFormik({
  initialValues: {
    answer: "预定义答案",
    userInput: ""
  },
  validateOnChange: true, // 开启输入时自动校验
  validate: (values) => {
    const errors = {}
    if (values.userInput !== values.answer) {
      errors.userInput = "输入不匹配"
    }
    return errors
  }
})

3. 再基于 errors 和 values 共同判断类名即可实现实时更新。

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