阅读 316

react hook上如何在提交后重置input [type=file]

需求是,选择了文件后,文件上传成功后,能重置为“未选择任何文件”状态。百度了一圈都没有找到实际有用的操作方式,还是谷歌有效果,

image.png

image.png

可用方法是提供一个 key 值给 input

const fileRef = useRef<Input | null>(null)
const [fileInputKey, setFileInputKey] = useState('file')

//导入方法
const toImport = () => {
    // 获取文件
    const file = fileRef.current.input?.files[0]
    if(file) {
        const formData = new FormData();
        formData.append('file', file)
        
        jiekou(formData).then(res => {
            // 接口访问成功后
            setFileInputKey(`file${new Date()}`)
        })
    } else {
        message.info('请选择文件')
    }
}
复制代码
 <Input
  ref={fileRef}
  type="file"
  id="XLS_FILE"
  name="XLS_FILE"
  accept=".xls"
  style={{ width: 250 }}
  key={fileInputKey}
/>
复制代码

参考链接 # How to reset input[type=file] after form submission?

文章分类
前端
文章标签