React清空input上传

React清空input上传

在 React 中清空 <input type="file" /> 元素的值，可以使用 ref 来获取 DOM 元素，并手动设置其值为 null 或 “”

1.在组件中定义一个 ref，用于获取 元素的引用：

const fileInputRef = useRef(null);

2.将 ref 传递给 元素，并使用 onChange 处理函数处理文件上传事件：

<input
  type="file"
  ref={fileInputRef}
  onChange={(e) => handleFileUpload(e.target.files[0])}
/>

3.在处理文件上传操作完成后，手动清空 元素的值：

const handleFileUpload = (file) => {
  // 执行文件上传操作
  // ...
  fileInputRef.current.value = "";
};

在上述代码中，我们首先使用 useRef 创建了一个 fileInputRef 引用，然后将其传递给 元素的 ref
属性。在处理文件上传操作完成后，我们手动将 fileInputRef.current.value
属性设置为一个空字符串，从而清空文件上传表单元素的值。

注意，由于安全限制，浏览器不允许直接修改 <input type="file"> 的值。因此，我们只能通过 ref 来获取其值并进行修改。