reactjs - 表单在提交reactjs时重新加载
问题描述
当我提交表单时,它会重新加载,但是当没有选择文件时,它不会重新加载,只显示一条错误消息“未上传文件”。只有在我提交文件时才会重新加载。
我已经使用 e.preventDefault() 来防止重新加载,但它不起作用。
组件代码
import React, { Fragment, useState } from 'react'
import axios from 'axios'
const FileUpload = () => {
const [file, setFile] = useState('');
const [filename, setFilename] = useState('Choose File')
const [uploadedFile, setUploadedFile] = useState({})
const onChange = (e) => {
setFile(e.target.files[0]);
setFilename(e.target.files[0].name);
}
const onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', file);
try {
const res = await axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
const { fileName, filePath } = res.data;
setUploadedFile({ fileName, filePath });
console.log(uploadedFile);
} catch (err) {
if (err.response.status === 500) {
console.log("There was a problem with the server.");
} else {
console.log(err.response.data.msg);
}
}
}
return (
<Fragment>
<form onSubmit={onSubmit}>
<div className="mb-3">
<label htmlFor="formFile" className="form-label">{filename}</label>
<input className="form-control" type="file" id="formFile" onChange={onChange} />
</div>
{/* <button type="submit" value="Upload" className="btn btn-primary w-100" /> */}
<button className="btn btn-primary w-100" type="submit">Upload</button>
</form>
</Fragment>
)
}
export default FileUpload
任何人都可以请帮助我。
解决方案
这段代码的问题在于异步事件处理程序,
preventDefault
需要同步调用才能产生任何效果。
你应该e.persist()
先打电话e.preventDefault()
推荐阅读
- dataframe - Julia:CSV.write 内存效率很低?
- apache - 使用 Apache2 WebDAV 阻止文件覆盖
- vb.net - 如何使用 MS Access 和 Visual Basic 显示来自过滤器的用户输入的多个结果
- reactjs - 可摇树图标组件
- c - memmove 和 bcopy 有什么区别?
- python - 如何在 python 中创建具有属性的嵌套文件夹?
- ios - SKShader shader.fsh 的 Alpha 通道被忽略
- tensorflow - ResNet50() 不显示摘要并抛出错误
- c++ - std::shared_ptr 线程安全
- mysql - 在mysql中选择查询输出和SP和查询执行之间的区别