时间戳

首页 > 解决方案 > react-dropzone - 访问通过单击添加的文件不删除

javascript - react-dropzone - 访问通过单击添加的文件不删除

问题描述

我正在使用 react-dropzone 基本示例（react-dropzone basic）

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />

这按预期工作，直到我使用 click 方法添加文件。使用单击添加文件时，acceptedFiles不要注册文件（我添加了一个 onChange 处理程序，并且 event.target.files 显示了该文件，因此它肯定会被添加到整体中FileList）。

因此，我无法Files <ul>像在拖动文件中那样显示通过单击详细信息添加的文件。我认为这也是如此，fileRejections但我还没有实现它。

我希望我遗漏了一些明显的东西，因为我认为 dropzone 可以同时处理拖动和单击行为？

如果可能的话，感谢有人指出我正确的方向。

标签： javascriptreactjsfile-uploadreact-dropzone

解决方案

上面的代码处理拖放，但它只为您提供最新添加的文件，而不是上传文件的整个列表。

要正确实现它，您可以维护一个状态并向 useDropzone 添加一个 onDrop 函数，您将在其中附加文件并更新状态

function Basic(props) {
  const [files, setFiles] = React.useState([]);
  const onDrop = React.useCallback(acceptedFiles => {
    setFiles(prev => [...prev, ...acceptedFiles]);
  }, []);
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  const fileList = files.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{fileList}</ul>
      </aside>
    </section>
  );
}

工作演示

推荐阅读