问题描述
如何使用select-react-dropzone通过选择将一个或多个文件及其描述添加到组件的状态。
我正在使用Reactjs,dropzone和bootstrap,我想要实现的是:添加一个或多个文件(通过将它们拖到某个区域),然后查看已添加文件的列表以及每个文件的选择输入(带有用户定义“类型”的选项)将所有这些信息保存在一个状态中,然后将该信息发送到API。 与图片中出现的内容类似:
到目前为止,我的代码会根据扩展名(pdf,xlsx ...)和拒绝的文件向我返回已接受文件的列表,但是我不知道如何添加选择(具有“来自文件的类型”选项,可以是“摘要”,“报告”,“测试” ...)并将其保存为一种状态,然后将其发送到API。
到目前为止,我使用react-dropzone编写的代码是:
const baseStyle = {
flex: 1,display: "flex",flexDirection: "column",alignItems: "center",padding: "20px",borderWidth: 2,borderRadius: 20,borderColor: "#26C2E7",borderStyle: "dashed",backgroundColor: "#fafafa",color: "#c4c4c4",outline: "none",transition: "border .24s ease-in-out"
};
const activeStyle = {
borderColor: "#f2f"
};
const acceptStyle = {
borderColor: "#f8f"
};
const rejectStyle = {
borderColor: "#f2f"
};
function InputFiles(props) {
const {
acceptedFiles,fileRejections,isDragActive,isDragAccept,isDragReject,getRootProps,getInputProps
} = reactDropzone.useDropzone({
accept: ".xlsx,.docx,.pdf"
});
const style = React.useMemo(
() => ({
...baseStyle,...(isDragActive ? activeStyle : {}),...(isDragAccept ? acceptStyle : {}),...(isDragReject ? rejectStyle : {})
}),[isDragActive,isDragAccept]
);
const acceptedFileItems = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
const fileRejectionItems = fileRejections.map(({ file,errors }) => (
<li key={file.path}>
{file.path} - {file.size} bytes
<ul>
{errors.map((e) => (
<li key={e.code}>{e.message}</li>
))}
</ul>
</li>
));
return (
<section className="container">
{/* <div {...getRootProps({ style })}> */}
<div {...getRootProps({ style })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
<em>(Only *.pdf,*.xlsx,*.docx files will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
);
}
ReactDOM.render(<InputFiles />,document.body);
window.onload = function() {
console.log('onload');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/11.2.0/index.js"></script>
目标是得到这样的东西:
添加文件及其描述时,必须将它们保存在组件状态下,目的是在单击“保存”时,向API发出POST请求,而在单击“取消”时,必须删除状态信息
解决方法
useDropZone
使用回调onDrop
,可以使您像这样获得文件名:
const onDrop = React.useCallback((acceptedFiles) => {
// Do something with the files
},[]);
const { ... } = useDropzone({ onDrop });
一旦每次删除文件都有文件名,就可以将其存储在状态中,显示名称并选择并在每次单击选择时相应地更新该状态。
还要注意,doc说它应该至少是React 16.8,但似乎您使用的是React 16.6。
,就像@Emmanuel在他的答案中提到的那样,您可以将文件存储在一个状态中,此实现使用名称作为键将文件存储在地图中。
import React,{ useMemo,useState } from "react";
import { useDropzone } from "react-dropzone";
const baseStyle = {
flex: 1,display: "flex",flexDirection: "column",alignItems: "center",padding: "20px",borderWidth: 2,borderRadius: 20,borderColor: "#26C2E7",borderStyle: "dashed",backgroundColor: "#fafafa",color: "#c4c4c4",outline: "none",transition: "border .24s ease-in-out"
};
const activeStyle = {
borderColor: "#f2f"
};
const acceptStyle = {
borderColor: "#f8f"
};
const rejectStyle = {
borderColor: "#f2f"
};
function InputFiles(props) {
const [files,setFiles] = useState({});
const {
fileRejections,isDragActive,isDragAccept,isDragReject,getRootProps,getInputProps
} = useDropzone({
onDrop: (acceptedFiles) => {
setFiles((prevFiles) =>
acceptedFiles.reduce(
(acc,file) => ({
...acc,[file.name]: {
file,fileType: ""
}
}),prevFiles
)
);
},accept: ".xlsx,.docx,.pdf"
});
const style = useMemo(
() => ({
...baseStyle,...(isDragActive ? activeStyle : {}),...(isDragAccept ? acceptStyle : {}),...(isDragReject ? rejectStyle : {})
}),[isDragActive,isDragAccept]
);
const acceptedFileItems = Object.keys(files).map((fileName) => {
const currentFile = files[fileName].file;
const onSelectChange = (e) => {
e.persist();
setFiles((prevFiles) => {
return {
...prevFiles,[fileName]: {
...prevFiles[fileName],fileType: e.target.value
}
};
});
};
return (
<li key={fileName}>
<div style={{ display: "flex" }}>
<span>
{currentFile.path} - {currentFile.size} bytes
</span>
<select value={currentFile.fileType} onChange={onSelectChange}>
<option value=""></option>
<option value="summary">summary</option>
<option value="description">report</option>
<option value="report">description</option>
</select>
</div>
</li>
);
});
const fileRejectionItems = fileRejections.map(({ file,errors }) => (
<li key={file.path}>
{file.path} - {file.size} bytes
<ul>
{errors.map((e) => (
<li key={e.code}>{e.message}</li>
))}
</ul>
</li>
));
return (
<section className="container">
{/* <div {...getRootProps({ style })}> */}
<div {...getRootProps({ style })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here,or click to select files</p>
<em>(Only *.pdf,*.xlsx,*.docx files will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
<button onClick={() => console.log(files)}>console log files</button>
</aside>
</section>
);
}
export default InputFiles;
您可以在https://codesandbox.io/s/react-drop-zone-select-vhc2l上查看它的工作情况