如何在React中使用react-hook-form取消多选文件中的特定文件

直接修改input[type="file"]关联的表单值无法生效，核心原因是原生FileList是不可变对象，无法通过splice这类数组方法修改，且React Hook Form对文件输入的默认处理依赖原生input的只读值。要实现单个文件移除，得换一种方式管理文件列表：

解决方案步骤 #

1. 用独立状态跟踪可修改的文件数组，替代原生FileList
2. 同步该数组与React Hook Form的表单字段
3. 通过修改数组实现单个文件移除，再同步回表单

完整代码示例 #

import { useForm } from "react-hook-form";
import { useState } from "react";

export default function FileUploadForm() {
  const { register, setValue, getValues, handleSubmit } = useForm();
  // 用状态存储可修改的文件数组
  const [selectedFiles, setSelectedFiles] = useState([]);

  // 处理文件选择：合并新文件到现有列表
  const handleFileChange = (e) => {
    const newFiles = Array.from(e.target.files);
    const updatedFiles = [...selectedFiles, ...newFiles];
    setSelectedFiles(updatedFiles);
    // 同步到React Hook Form的表单字段
    setValue("files", updatedFiles);
  };

  // 移除单个文件：过滤掉对应索引的文件
  const handleRemoveFile = (index) => {
    const updatedFiles = selectedFiles.filter((_, i) => i !== index);
    setSelectedFiles(updatedFiles);
    setValue("files", updatedFiles);
  };

  // 提交表单时获取处理后的文件数组
  const onSubmit = (data) => {
    console.log("提交的文件：", data.files);
    // 这里可以做文件上传逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 文件选择输入框 */}
      <input
        type="file"
        multiple
        onChange={handleFileChange}
        {...register("files")}
      />

      {/* 已选文件列表及移除按钮 */}
      <div className="file-list">
        {selectedFiles.map((file, index) => (
          <div key={index} className="file-item">
            <span>{file.name}</span>
            <button type="button" onClick={() => handleRemoveFile(index)}>
              移除
            </button>
          </div>
        ))}
      </div>

      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• 原生e.target.files是FileList对象，需用Array.from()转成数组才能进行增删操作
• 独立状态selectedFiles作为文件列表的唯一数据源，修改后同步到React Hook Form的files字段
• 提交表单时，data.files会直接拿到处理后的文件数组，可直接用于上传或其他逻辑

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