react.js javascript 前端 React清空input上传

React清空input上传

在 React 中清空 元素的值，可以使用 ref 来获取 DOM 元素，并手动设置其值为 null 或 “”

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

const fileInputRef = useRef(null);

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

type="file"

ref={fileInputRef}

onChange={(e) => handleFileUpload(e.target.files[0])}

/>

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

const handleFileUpload = (file) => {

// 执行文件上传操作

// ...

fileInputRef.current.value = "";

};

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

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

精彩链接