Javascript React js React dropzone删除文件

链接：

我必须确保上传一个文件，但我想提供一种可能性，可以在出现错误时删除它，以便上传另一个文件

因此，单击X应该允许您清空要加载的文件，但我没有成功

你能给我一些建议吗

代码：

从“React”导入React；
从“react dom”导入react dom；
从“react dropzone”导入{useDropzone}；
从“@material ui/icons”导入{AttachFile}”；
从“@material ui/core/Chip”导入芯片；
函数Dropzone（{onDrop，onDelete}）{
const{acceptedFiles，getRootProps，getInputProps}=useDropzone({
昂德罗普
});
let file=acceptedFiles[0]；
const label=file？`${file.path}-${file.size}字节`:“拖放文件”；
log（“Dropzone”，文件）；
返回(
{
文件=[]；
onDelete（）；
}
：错
}
/>
);
}
函数App（）{
常量[状态，设置状态]=React.useState({
文件名：“”，
文件上载：未定义
});
const onDrop=file=>{
const reader=new FileReader（）；
reader.onabort=（）=>console.log（“文件读取被中止”）；
reader.onerror=（）=>console.log（“文件读取失败”）；
reader.onload=（）=>{
设置状态（上一个=>({
…上一页，
文件名：文件[0]。名称，
文件上载：文件[0]
}));
};
reader.readAsArrayBuffer（文件[0]）；
};
返回(
{
设置状态（上一个=>({
…上一页，
文件名：“”，
文件上载：“
}));
}}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我希望此代码能起作用：

import React, { useState, useEffect, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

const CreateFileUpload = () => {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop, accept: '.png, .jpeg' })
  const files = acceptedFiles.map((file, i) => (
    <li key={file.path} className="selected-file-item">
      {file.path}  <i className="fa fa-trash text-red" onClick={() => remove(i)}></i>
    </li>
  ));
  const remove = file => {
    const newFiles = [...files];     // make a var for the new array
    acceptedFiles.splice(file, 1);        // remove the file from the array
  };
  return (
    <div>
      <div {...getRootProps()} className="dropzone-main">
        <div
          className="ntc-start-files-dropzone"
          aria-disabled="false"
        >
        </div>
        <button className="add-button" type="button">
          <i className="fa fa-plus"></i>
        </button>
        <h3 className="upload-title">
          <span></span>
        </h3>
        <input
          type="file"
          multiple=""
          autocomplete="off"
          className="inp-file"
          // onChange={uploadFile}
          multiple
          {...getInputProps()}
        />
        {isDragActive ?
          <div></div>
          :
          <div>
            <p>  Upload files  </p>
          </div>
        }
      </div>
      <aside>
        {files.length > 0 ? <h5>Selected Files</h5> : <h5></h5>}
        <ul>{files}</ul>
      </aside>
    </div>
  )
}
export default CreateFileUpload

import React，{useState，useffect，useCallback}来自“React”
从“react dropzone”导入{useDropzone}
const CreateFileUpload=（）=>{
const onDrop=useCallback（acceptedFiles=>{
//对这些文件做些什么
}, [])
const{getRootProps，getInputProps，isDragActive，acceptedFiles}=useDropzone（{onDrop，accept:'.png，.jpeg'}）
const files=acceptedFiles.map（（文件，i）=>(

{file.path}删除（i）}>

));
const remove=file=>{
const newFiles=[…files]；//为新数组创建一个变量
acceptedFiles.splice（文件，1）；//从数组中删除该文件
};
返回(
{isDragActive？
:
上传文件

}
{files.length>0？所选文件：}
{files}
)
}
导出默认CreateFileUpload

---

谢谢

我希望这段代码能起作用：

import React, { useState, useEffect, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

const CreateFileUpload = () => {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop, accept: '.png, .jpeg' })
  const files = acceptedFiles.map((file, i) => (
    <li key={file.path} className="selected-file-item">
      {file.path}  <i className="fa fa-trash text-red" onClick={() => remove(i)}></i>
    </li>
  ));
  const remove = file => {
    const newFiles = [...files];     // make a var for the new array
    acceptedFiles.splice(file, 1);        // remove the file from the array
  };
  return (
    <div>
      <div {...getRootProps()} className="dropzone-main">
        <div
          className="ntc-start-files-dropzone"
          aria-disabled="false"
        >
        </div>
        <button className="add-button" type="button">
          <i className="fa fa-plus"></i>
        </button>
        <h3 className="upload-title">
          <span></span>
        </h3>
        <input
          type="file"
          multiple=""
          autocomplete="off"
          className="inp-file"
          // onChange={uploadFile}
          multiple
          {...getInputProps()}
        />
        {isDragActive ?
          <div></div>
          :
          <div>
            <p>  Upload files  </p>
          </div>
        }
      </div>
      <aside>
        {files.length > 0 ? <h5>Selected Files</h5> : <h5></h5>}
        <ul>{files}</ul>
      </aside>
    </div>
  )
}
export default CreateFileUpload

import React，{useState，useffect，useCallback}来自“React”
从“react dropzone”导入{useDropzone}
const CreateFileUpload=（）=>{
const onDrop=useCallback（acceptedFiles=>{
//对这些文件做些什么
}, [])
const{getRootProps，getInputProps，isDragActive，acceptedFiles}=useDropzone（{onDrop，accept:'.png，.jpeg'}）
const files=acceptedFiles.map（（文件，i）=>(

{file.path}删除（i）}>

));
const remove=file=>{
const newFiles=[…files]；//为新数组创建一个变量
acceptedFiles.splice（文件，1）；//从数组中删除该文件
};
返回(
{isDragActive？
:
上传文件

}
{files.length>0？所选文件：}
{files}
)
}
导出默认CreateFileUpload

---

谢谢

它对你有用吗？对你有用吗？？