React file input组件onChange不生效 重复选择同一张图片无响应

问题原因 #

<input type="file">的onChange事件仅在输入框的value属性发生变化时触发。你点击清除按钮时只重置了业务状态，没有清空文件输入框的value值，当用户两次选择同一张图片时，浏览器判定value没有变化，就不会触发onChange事件，也就不会执行后续的图片加载逻辑。

解决步骤 #

1. 新增ref用来关联文件输入框组件

// 引入useRef
import { useState, useRef } from 'react';

// 声明文件输入框的ref
const fileInputRef = useRef(null);

2. 给Form.File组件绑定ref
   如果你使用的是原生的input或者普通封装的上传组件，直接绑定ref属性即可：

<Form.File
  ref={fileInputRef}
  type="file"
  label={filename}
  onChange={(e) => {
    setImage(e.target.files[0]);
    setFileName(e.target.files[0].name);
    setPicture(URL.createObjectURL(e.target.files[0]));
    setClose(true);
  }}
  custom
/>

如果你使用的是React Bootstrap的Form.File组件，原生输入框的ref需要通过inputRef属性绑定，将上面的ref={fileInputRef}替换为inputRef={fileInputRef}即可。

3. 在清除按钮的点击逻辑中新增清空输入框value的代码

<img
  src={deleteicon}
  alt="Delete Thumbnail"
  className="thumbnail-close"
  onClick={() => {
    setImage(thumbimage);
    setPicture(thumbnail);
    setFileName("Upload Image");
    setClose(false);
    // 清空文件输入框的值
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  }}
/>

修改完成后，每次点击清除按钮都会清空输入框的历史值，再次选择同一张图片时就能正常触发onChange事件了。

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