react-dropzone -通过单击not drop添加的访问文件

Question

我使用的是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>中显示通过单击details添加的文件，就像显示拖动的文件一样。我假设fileRejections也是如此，但我还没有实现它。

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

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

Answer 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

Answer 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>
  );
}