React中使用ref绑定file输入框 重复选同一文件时onChange不生效

这是HTML原生<input type="file">的固有规则，和React的ref、事件绑定逻辑无关：file类型input的onChange事件仅在选中值发生变化时才会触发，如果用户两次在文件选择弹窗中选中完全一致的文件，input内部存储的选中状态没有任何变化，自然不会触发回调。

方案1（推荐，文件处理完成后重置input状态） #

仅需修改现有onFileChange方法，在拿到选中文件、完成状态更新后，手动将input的value重置为null，全程不需要改动其他现有逻辑：

onFileChange = (e) => {
  const selectedFile = e.target.files[0]
  // 弹窗取消选择时直接返回，避免空值处理
  if (!selectedFile) return

  this.setState({
    selectedFile: selectedFile,
  })

  // 核心逻辑：清空input的选中记录，保证下次选文件时一定触发onChange
  e.target.value = null
}

注意：不要将value设置为空字符串""，部分旧版本浏览器中对file类型input设置空字符串无法真正清除选中状态，置为null的全浏览器兼容性最优。

方案2（备选，点击触发弹窗时重置input状态） #

如果不想在文件处理逻辑中添加清空代码，可以修改onButtonClick方法，在触发文件选择弹窗前先重置input状态：

onButtonClick = () => {
  if (this.inputFile.current) {
    // 打开弹窗前先清掉上一次的选中记录
    this.inputFile.current.value = null
  }
  this.inputFile.current.click();
};

两种方案的核心逻辑完全一致：保证每次打开文件选择弹窗前，input都处于「无选中文件」的初始状态。不管用户这次选的是不是上一次的同一个文件，只要完成了文件选中动作，input的value就会从空变为有值，必然触发onChange事件，完全不需要重构原有上传流程。

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