React中文件输入删除后无法上传同名文件，如何触发onChange事件？

问题原因 #

浏览器的文件输入框（<input type="file">）只会在选中的文件列表发生实际变化时触发onChange事件。删除文件后，输入框的内部状态仍保留着之前选中的文件信息，此时重新选择同名文件，浏览器会判定文件未发生变化，因此不会触发onChange。

解决方案 #

方法一：删除文件后重置输入框的value

给文件输入框添加ref，在删除文件的逻辑中手动将输入框的value设为空字符串，强制重置其内部状态。

修改后的代码示例：

import { useRef } from 'react';

// ...

render() {
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
      e.persist();
      Array.from(e.currentTarget.files || []).forEach(file => {
        let modelname = file.name
        console.log(modelname); // 注意：原代码里的consle.log拼写错误，已修正
      });
    };

  // 假设这是你的删除文件函数
  const handleDeleteFile = () => {
    // 执行你的文件删除逻辑（比如从显示列表中移除）
    // 重置输入框状态
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  return (
   <>
    <input 
      ref={fileInputRef}
      accept=".csar,.yaml" 
      type="file" 
      name="filenameanddata" 
      onChange={handleFileChange} 
    /> 
    <label htmlFor="file">
     <Button className={inputUploadButton} variant="primary" type="submit" onClick={e => e.stopPropagation()}>Upload</Button>
    </label>
    {/* 假设这是删除按钮 */}
    <Button onClick={handleDeleteFile}>删除文件</Button>
  </>
 )
}

方法二：通过key重置输入框组件

利用React的key属性特性：当key值变化时，React会销毁旧组件并重新渲染新组件，从而彻底重置输入框的状态。

修改后的代码示例：

import { useState } from 'react';

// ...

render() {
  const [inputKey, setInputKey] = useState(0);
  
  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
      e.persist();
      Array.from(e.currentTarget.files || []).forEach(file => {
        let modelname = file.name
        console.log(modelname); // 修正拼写错误
      });
    };

  const handleDeleteFile = () => {
    // 执行你的文件删除逻辑
    // 更新key值，触发组件重置
    setInputKey(prev => prev + 1);
  };

  return (
   <>
    <input 
      key={inputKey}
      accept=".csar,.yaml" 
      type="file" 
      name="filenameanddata" 
      onChange={handleFileChange} 
    /> 
    <label htmlFor="file">
     <Button className={inputUploadButton} variant="primary" type="submit" onClick={e => e.stopPropagation()}>Upload</Button>
    </label>
    <Button onClick={handleDeleteFile}>删除文件</Button>
  </>
 )
}

额外提示 #

原代码中的consle.log存在拼写错误，应该改为console.log，否则无法正常打印文件名。

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