Reactjs 下拉菜单 - 需要帮助

Question

我是 Reactjs 新手。我需要上传文件的机制。搜索我发现库 React Dropdown 可以为文件创建拖放操作。

请有人提供代码来创建基本的拖放操作，或者参考我从头开始学习的网络或文档

Answer 1

你可以用谷歌搜索这个问题，你可以找到多个用于文件上传的库。对我来说，我主要使用react-dropzone来上传文件。 下面是文件上传的基本实现。

import React from 'react';
import Dropzone from 'react-dropzone';

const FileUpload = () => {
  const [files, setFiles] = useState([]);

  const onDrop = (acceptedFiles) => {
    setFiles(acceptedFiles);
  };

  return (
    <Dropzone onDrop={onDrop}>
      {({ getRootProps, getInputProps }) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drag and drop files here, or click to select</p>
          {files.length > 0 && (
            <ul>
              {files.map((file) => (
                <li key={file.name}>{file.name}</li>
              ))}
            </ul>
          )}
        </div>
      )}
    </Dropzone>
  );
};

export default FileUpload;

这里是react-dropzone文档的链接，您可以在其中了解有关该库及其功能的更多信息：

https://react-dropzone.js.org/

我希望这有帮助！