React中创建受控`<input type='file'>`元素的正确方法

<input type="file">的特殊性在于它的files属性是只读的，且FileList对象与对应的DOM元素强绑定，无法直接复用来自其他DOM上下文的FileList进行赋值——这就是你遇到DOMException报错的核心原因。

要实现符合React受控组件规范的文件输入，需要换一种思路：父组件维护脱离DOM的文件状态（如File对象数组），子组件负责将用户选择的文件同步到父状态，并根据父状态完成清空操作；回显已选文件则通过自定义UI实现，而非直接修改files属性。

实现代码 #

子组件：FileInput

import React, { useEffect, useRef } from "react";

const FileInput = ({ value, onChange }) => {
  const inputRef = useRef();

  // 响应父组件的清空指令
  useEffect(() => {
    if (!value || value.length === 0) {
      inputRef.current.value = "";
    }
  }, [value]);

  const handleChange = (e) => {
    // 将只读的FileList转为普通数组，脱离DOM绑定
    const selectedFiles = Array.from(e.target.files);
    onChange(selectedFiles);
  };

  return (
    <div>
      {/* 自定义回显已选文件 */}
      {value && value.length > 0 && (
        <div className="selected-files">
          已选文件：
          {value.map((file, idx) => (
            <span key={idx} className="file-name">{file.name}</span>
          ))}
        </div>
      )}
      <input type="file" ref={inputRef} onChange={handleChange} multiple />
    </div>
  );
};

export default FileInput;

父组件使用示例

import React, { useState } from "react";
import FileInput from "./FileInput";

const FormComponent = () => {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (files) => {
    setSelectedFiles(files);
  };

  const handleReset = () => {
    setSelectedFiles([]);
  };

  return (
    <div>
      <FileInput value={selectedFiles} onChange={handleFileChange} />
      <button onClick={handleReset}>重置文件选择</button>
    </div>
  );
};

export default FormComponent;

关键说明 #

1. 状态脱离DOM：将FileList转为File对象数组保存到父组件状态，避免了FileList与DOM绑定的限制，状态也更易于处理和序列化。
2. 合法清空操作：只有设置input.value = ""是浏览器允许的修改文件输入的方式，用于响应父组件的重置指令。
3. 自定义回显：通过额外的DOM元素显示已选文件信息，绕过了无法直接设置files属性的限制，同时提供了更灵活的UI定制能力。

如果只需要支持单文件选择，只需在handleChange中取selectedFiles[0]，并调整父组件状态的类型即可。

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