希望你能帮助我,我正在使用react-dropzone中的useDropzone钩子,我不知道如何为每个文件创建一个删除文件按钮。
如何删除单个文件?
这是我的代码:
function DragFile(props) {
const { acceptedFiles, rejectedFiles, getRootProps, getInputProps } = useDropzone({
accept: 'image/jpeg, image/png, .pdf',
maxSize: 3000000,
multiple: true
});
const acceptedFilesItems = acceptedFiles.map(file => (
<Col xs={12} md={4} key={file.path} className="card-file">
<div className="file-extension">{file.path.substring(file.path.indexOf('.') + 1)}</div>
<span>{file.path.substring(0, file.path.indexOf('.'))} <small>{(file.size / 1000).toFixed(2)} Kb</small></span>
<button className="delete">DeleteButton</button>
</Col>
));
const rejectedFilesItems = rejectedFiles.map(file => (
<li key={file.path}>
{file.path.substring(0, file.path.indexOf('.'))} - {file.size / 1000} Kb
</li>
));
return (
<div>
<div {...getRootProps({ className: 'dropzone drag-n-drop' })}>
<input id="file-claim" {...getInputProps()} />
<img src={uploadSrc} alt="Subir archivo" />
<p>Drag files here (PDF, JPG, PNG).</p>
</div>
<Row className="accepted-files">
{acceptedFilesItems}
</Row>
</div>
);
}
export default DragFile;
4条答案
按热度按时间mspsb9vt1#
让我添加这段代码,因为这里的其他答案对我来说并不清楚:
您需要创建自己的myFiles状态并使用onDrop函数更新它,然后使用remove函数从本地状态中删除该文件。
3pvhb19x2#
您可能已经可以使用它了,但只需要将其附加到click处理程序:
并在Map中传递数字:
acceptedFiles.map(file...
应为acceptedFiles.map((file, i)....
然后得到
<button type="button" onClick={() => remove(i)> DeleteButton</button>
,其中i
是数组中文件的编号。6mzjoqzu3#
我希望这对你有帮助:
uxhixvfz4#
当您删除文件时,将该数据添加到您的状态中,它应该允许您访问该数据,以便您可以删除。
大致如下:
在那里的某个地方,你必须把它和jsx结合起来。你还需要保持它和你发送到服务器的任何东西同步。这应该和你的组件状态一起完成。