reactjs - 在同一页面上使用多个 Dropzone 反应 Mui-Dropzone
问题描述
我正在尝试将 React 与 Mui-dropzone 一起使用来处理文件上传。我想在一页中使用多个 Dropzone 组件。我尝试将文件保存在状态(嵌套对象)中,但文件始终保存在我的最后一个状态,刚刚发生了什么?以及如何独立于每个状态存储每个文件?
const [data, setData] = useState({
firstFile: [],
secondFile: []
});
const [isOpen, setIsOpen] = useState(false);
function handleDialog() {
setIsOpen(!isOpen);
}
function onSaveFirstFile(file) {
setData(prevState => ({
...data,
firstFile: [...prevState.firstFile, file]
}))
setIsOpen(false);
}
function onSaveSecondFile(file) {
setData(prevState => ({
...data,
secondFile: [...prevState.secondFile, file]
}))
setIsOpen(false);
}
function showState() {
console.log(data)
}
return (
<div className="App">
{/* ------------------------------
--------First Dropzone
------------------------------ */}
<Link classes={{ root: classes.linkRoot }} onClick={handleDialog}>
<Typography variant="body2">Upload first File</Typography>
</Link>
<DropzoneArea
dropzoneClass={classes.dropZoneRoot}
/>
<DropzoneDialog
open={isOpen}
acceptedFiles={["image/jpeg", "image/png", "image/bmp"]}
showPreviews={true}
maxFileSize={5000000}
showFileNamesInPreview={true}
onDelete={deleteFileObj => {
console.log("OnDelete", deleteFileObj);
}}
onClose={() => {
console.log("OnClose : ", data);
setIsOpen(false);
}}
onSave={onSaveFirstFile}
/>
<br />
{/* ------------------------------
--------Second Dropzone
------------------------------ */}
<Link classes={{ root: classes.linkRoot }} onClick={handleDialog}>
<Typography variant="body2">Upload second File</Typography>
</Link>
<DropzoneArea
dropzoneClass={classes.dropZoneRoot}
/>
<DropzoneDialog
open={isOpen}
acceptedFiles={["image/jpeg", "image/png", "image/bmp"]}
showPreviews={true}
maxFileSize={5000000}
showFileNamesInPreview={true}
onDelete={deleteFileObj => {
console.log("OnDelete", deleteFileObj);
}}
onClose={() => {
console.log("OnClose : ", data);
setIsOpen(false);
}}
onSave={onSaveSecondFile}
/>
<br />
<button onClick={showState}>Show State!</button>
</div>
这是我在第一个 Dropzone 上上传文件后在控制台中得到的(它保存在错误的状态,为什么?)
Object {firstFile: Array[0], secondFile: Array[1]}
注意:这是我的代码框:https://codesandbox.io/s/multiple-mui-dropzone-4fwlb
解决方案
function handleDialog() {
setIsOpen(!isOpen);
}
两者都DropzoneDialog
通过此功能打开。当您单击任何一个时,您都设置open={true}
了两者。你的文件总是上传到secondFile
阵列,因为你的第一个 DropZone 总是隐藏在第二个后面。
推荐阅读
- python - 如何获取pandas DataFrame中两列的每一行的p值?
- powerbi - PowerBI:如何获取表中列的不同计数,同时分别对许多列进行分组
- kubernetes - 关闭节点时端点更新非常慢
- azure - Azure 响应时间监控每个请求的范围
- json - 使用 REST POST 在映射器中使用 Postman 传递 json 正文 - Snaplogic
- swiftui - Swiftui - 从 UIViewRepresentable 访问 UIKit 方法/属性
- javafx - 为什么 ASCII 艺术在控制台/终端输出等文本字段中看起来不好看?
- dynamics-crm - Dynamics 365:Microsoft Dynamics CRM 遇到错误 System.Runtime.Serialization.SerializationException
- jquery - .Net MVC - 无法阻止我的 Ajax.BeginForm 被黑客入侵
- encryption - Cassandra 集群从未加密状态转变为加密状态