如何在 ReactJS 中使用 react-dropzone 模块？

React-Dropzone 模块是一个简单的React 钩子，用于为 n 个文件创建一个符合 HTML5 的拖放区。我们可以使用这个模块为用户提供一种拖放他们的多个文件的方式，然后我们可以根据业务需求来处理这些文件。 我们可以在 ReactJS 中使用以下方法来使用react-dropzone模块。

方法：在下面的示例中，我们使用了react-dropzone模块来演示如何在我们的 ReactJS 应用程序中使用它。我们已经从模块中导入了useDropzone ，它是一个包装器组件，以获取我们用来在 Input 元素上创建拖放区的 dropzone 属性获取器。现在，每当用户单击我们的示例文本时：单击以选择文件或将文件拖放到此处！ ，它将允许用户选择文件，然后我们可以根据业务需求对该文件执行任何操作。

Dropzone Props Getters：它有助于创建一个拖放区，因为这些是 返回具有以下属性的对象的 getter 函数 用于创建拖放区。输入属性应应用于 元素，而根属性可以应用于任何元素。

Refs：我们从Dropzone道具获得的getRootProps和getInputProps函数接受自定义refKey作为参数属性之一。当我们尝试应用于元素的getRootProps和getInputProps e函数的道具没有公开对该元素的引用时，它很有用。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

• 第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：

  npm install react-dropzone 

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
  
export default function App() {
  
  const onDrop = useCallback(acceptedFiles => {
    alert(acceptedFiles[0].name)
    console.log("Now you can do anything with"+
                " this file as per your requirement")
  }, [])
  
  const { getInputProps, getRootProps } = useDropzone({ onDrop })
  
  return (
    

      
React-Dropzone Module Demo
      

        
        
Click to select file or 
           drag-and-drop the file here!!
  
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://www.npmjs.com/package/react-dropzone