React开发中如何重置file输入框绑定的this.fileInput引用值为空？

你不需要将this.fileInput这个ref对象本身设置为null或undefined，浏览器原生的文件输入框的选中状态由自身的value属性控制，直接修改ref指向的DOM元素属性即可完成重置：

• 首先在文件上传成功的逻辑后，判断this.fileInput.current是否存在（避免边界场景下ref未挂载导致报错）
• 将this.fileInput.current.value赋值为空字符串即可清空已选中的文件

修改后的handleSubmit示例代码如下：

handleSubmit(event) {
  event.preventDefault();
  alert(`Selected file - ${this.fileInput.current.files[0].name}`);
  // 此处为你原有的文件上传逻辑
  // 上传成功后执行重置逻辑
  if (this.fileInput.current) {
    this.fileInput.current.value = '';
  }
}

补充说明：如果有特殊场景需要解绑ref和DOM元素的关联，你可以额外执行this.fileInput.current = null，但普通的重置上传选中状态的场景不需要做这一步操作。

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