使用Formik时文件上传控件touched属性未生效及校验未触发的解决办法

数据老陈

2026-8-1

解决方案

针对Formik中文件输入框touched属性不更新、校验不触发的问题，核心原因是你使用了自定义onChange函数，绕过了Formik默认的状态更新和校验触发逻辑，只需手动补充这些步骤即可解决：

1. 手动更新`touched`状态并触发校验

在你的onFileChange函数中，添加Formik提供的setFieldTouched和validateField方法调用，确保文件选择后立即标记字段为已触碰，并触发校验：

// 修正onFileChange函数，接收setFieldTouched和validateField参数
const onFileChange = (values, i, paramId, setFieldValue, setFieldTouched, validateField) => (e) => {
  const selectedFile = e.target.files[0];
  // 替换为你实际的Formik字段路径，比如动态数组项的路径
  const fieldPath = `params[${i}].paramDefaultValue`;
  
  // 设置文件值到Formik状态
  setFieldValue(fieldPath, selectedFile);
  // 手动标记字段为已触碰
  setFieldTouched(fieldPath, true);
  // 触发该字段的校验逻辑
  validateField(fieldPath);
};

2. 修正组件调用参数

在渲染文件输入框时，把Formik props中的setFieldTouched和validateField传递给onFileChange，同时修正name属性为正确的字段路径（避免和文本输入框重名导致状态冲突）：

<Form.Control
  id="fileToUpload"
  name={`params[${i}].paramDefaultValue`} // 改为正确的动态字段路径
  type="file"
  // 修正accept属性的错误写法，根据条件设置正确的文件类型
  accept={param.paramDefaultValue.name === 'Fichier CSV' ? '.csv' : ''}
  onChange={
    onFileChange(values, i, param.paramId, setFieldValue, setFieldTouched, validateField)
  }
/>