React中type为file的隐藏input元素如何获取useForm验证错误

问题根因 #

你遇到的问题和hidden属性无关，核心是自行定义的onChange回调覆盖了register方法返回的默认事件回调，导致useForm无法正常同步文件输入框的状态，自然无法正常返回验证结果。

解决步骤 #

• 不要直接在input标签上定义onChange覆盖register返回的默认回调，把自定义的文件赋值逻辑写到register的配置项的onChange字段中
• 验证错误可以直接从formState.errors中对应字段image里获取

修正后代码示例 #

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { IconButton } from '@mui/material';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';

function YourComponent() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [file, setFile] = useState(null);

  const onSubmit = (formData) => {
    // 提交逻辑，formData.image可以直接拿到选中的文件对象
    console.log('表单数据', formData, '单独存储的文件', file);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <IconButton variant="contained" component="label">
        <AddCircleOutlineIcon fontSize="large" />
        <input
          {...register("image", {
            required: "请选择要上传的图片",
            onChange: (e) => {
              setFile(e.target.files[0]);
            }
          })}
          type="file"
          accept=".jpg,.png,.jpeg"
          hidden
        />
      </IconButton>
      {/* 验证错误提示示例 */}
      {errors.image && <span style={{color: '#f44336', fontSize: '14px'}}>{errors.image.message}</span>}
      <button type="submit">提交表单</button>
    </form>
  )
}

补充说明：你也可以在register的第二个参数里扩展更多自定义校验规则，比如限制文件大小、校验文件格式等，所有校验产生的错误信息都会同步到errors.image下，hidden属性不会影响useForm对输入框的状态采集。

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