React MuiFileInput文件上传验证：选中文件仍显错误的解决办法

你在用Material UI的MuiFileInput组件搭配React Hook Form做文件上传校验时，设置了必填规则，但选中文件后错误提示依然存在。你的代码如下：

import React from "react";
import {useForm } from "react-hook-form";
import Button from "@mui/material/Button";
import { MuiFileInput } from "mui-file-input";

export default function App() {
  const {  register, handleSubmit, formState: { errors },} = useForm();
  const [file, setFile] = React.useState(null);
  const handleFile = (event) => {
    setFile(event);
  };
  
  const onSubmit = (data) => {
    alert(JSON.stringify(data.file?.name));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MuiFileInput sx={{ margin: 2 }}
        {...register("uploadFile", 
          {required: "Please select an image."},
        )}
        onChange= {handleFile}
        value={file}
        label="Upload Image" placeholder='Select a file'
        error={Boolean(errors.uploadFile)}
        helperText={errors.uploadFile?.message}
      />
      <Button type="submit" variant="contained" sx={{ margin: 2 }}>Submit</Button>
    </form>
  )
}

问题原因 #

核心问题是React Hook Form没有感知到MuiFileInput的文件变化：你用自定义的useState管理文件状态，但register绑定的表单字段没有同步这个变化，导致表单始终认为uploadFile字段为空，错误提示不会自动消失。

解决方案 #

推荐使用React Hook Form的Controller组件适配第三方UI组件，它会自动同步组件值到表单状态。修改后的代码如下：

import React from "react";
import { useForm, Controller } from "react-hook-form";
import Button from "@mui/material/Button";
import { MuiFileInput } from "mui-file-input";

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    alert(JSON.stringify(data.uploadFile?.name));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="uploadFile"
        control={control}
        rules={{ required: "Please select an image." }}
        render={({ field: { onChange, value } }) => (
          <MuiFileInput
            sx={{ margin: 2 }}
            onChange={onChange}
            value={value}
            label="Upload Image"
            placeholder='Select a file'
            error={Boolean(errors.uploadFile)}
            helperText={errors.uploadFile?.message}
          />
        )}
      />
      <Button type="submit" variant="contained" sx={{ margin: 2 }}>Submit</Button>
    </form>
  );
}

关键修改说明 #

1. 从react-hook-form中引入Controller组件
2. 移除自定义的useState，用Controller接管MuiFileInput的值管理
3. 通过control属性关联useForm返回的control实例，确保表单状态自动同步
4. 在render回调中直接使用Controller提供的onChange和value，无需手动处理状态同步

备选方案（不推荐） #

如果不想用Controller，也可以在自定义的handleFile中调用setValue同步表单字段：

// 引入setValue
const { register, handleSubmit, formState: { errors }, setValue } = useForm();

// 修改handleFile函数
const handleFile = (file) => {
  setFile(file);
  setValue("uploadFile", file); // 将文件同步到React Hook Form的字段中
};

但这种方式需要手动维护状态同步，不如Controller简洁可靠。

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