react 文件类型的 input 清空 value

file 类型的 input 在重复上传 路径和文件名都相同 的同一个文件时，默认第二次不会重新读取，这就导致：当我们修改了excel 中的某个单元格，保存之后，重新上传这个文件，input 并没有更新文件内容，我们需要手动在文件读取结束清空 input 中的 value。

如果使用 react 状态组件的话，应该这样做：

1、首先，使用 createRef 创建 ref

const searchInput = React.createRef()

2、然后在input上添加ref属性

 <input
    ref={this.searchInput}
    ...
    ...
    ...
    type="file"
/>

3、最后，在文件的 onloadend 事件中清空

const fileReader = new FileReader()

fileReader.onloadend = (event) => {
  this.searchInput.current && this.searchInput.current.value = ''
}

如果使用函数式组件，需要使用 useRef()

因为函数组件无状态，useRef 可以在组件更新后保存状态 searchInput.current 可以获取到 value，从而将 value 置空。

const searchInput = React.useRef()

<input
    ref={this.searchInput}
    ...
    ...
    ...
    type="file"
/>

const fileReader = new FileReader()

fileReader.onloadend = (event) => {
 searchInput.current && searchInput.current.value = ''
}

⚠️ 如果使用了 typescript + react

在 ts 中，需要给 ref 声明类型以及指定初始值，应该这样写：

const searchInput = React.useRef<HTMLInputElement>(null)
// 或 const searchInput = React.createRef<HTMLInputElement>()