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

【问题标题】：react-dropzone - accessing files added by click not dropreact-dropzone - 访问通过单击添加的文件不删除
【发布时间】：2020-05-28 12:22:19
【问题描述】：

我正在使用 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 />

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

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

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

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

【问题讨论】：

标签： javascript reactjs file-upload react-dropzone

【解决方案1】：

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

要正确实现它，您可以维护一个状态并向 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>
  );
}

Working demo

【讨论】：

请问您将如何处理使用onDrop 的被拒绝文件？
您可以使用两个单独的函数，例如 onDropAccepted 和 onDropRejected，而不是 onDrop。详情请查看文档：react-dropzone.js.org

【解决方案2】：

您的代码没有任何问题。您只需要正确点击 div 即可。

只需在拖放区域添加一点样式，以便拖放区域清晰可见。

working demo is here

export default 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
        style={{
          cursor: "pointer",
          background: "gray",
          height: "200px",
          border: "2px dashed blue"
        }}
        {...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>
  );
}

【讨论】：