在现代 Web 应用程序中，文件上传和处理是非常常见的需求。redux-form-dropzone 是一个基于 Redux 和 React 的用于进行文件上传的 npm 包。该包提供了良好的可定制性和扩展性，易于使用和集成。
安装
在使用 redux-form-dropzone 之前，需要先安装该包。你可以通过 npm 或 yarn 进行安装：
npm install redux-form-dropzone --save # 或 yarn add redux-form-dropzone
基本用法
下面我们来介绍如何在 React 组件中使用 redux-form-dropzone 进行文件上传。
第一步：引入依赖包
在组件中引入 redux-form 和 redux-form-dropzone：
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import Dropzone from 'redux-form-dropzone';第二步：准备表单
在组件中准备表单，我们需要定义表单的字段和验证规则：
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- -------------- -
----------- - -----
-
------ -------
--
----- ----------- - -- ------ ----- ----- - -------- ----- - -- -- -
------ -
-----
-------------------
-----
--------- ----------------- ----------------------- --
-------- -- ----- -- ---------------------
------
------
--
--
----- ------ - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
------ ----------- ----------------------- --
------- -------------------------
-------
--
--
------ ------- -----------
----- ---------
---------
-----------我们定义了一个名为 MyForm 的组件，使用了高阶函数 reduxForm 转换该组件为一个 redux-form 类型的表单。
在表单中，我们使用 Field 组件渲染一个上传组件。使用 Dropzone 组件实现上传功能，通过 props 将字段和表单收集起来。
第三步：上传文件
在提交表单时，我们需要实现在 Redux 中处理提交数据。通过 onSubmit 监听提交事件，在事件回调函数中处理数据：
-- -------------------- ---- -------
----- --- ------- --------------- -
-------- - ------ -- -
--------------------
--
-------- -
------ -
-----
------- ------------------------ --
------
--
-
-在 onSubmit 中，我们将表单数据输出到控制台。
至此，一个基本的文件上传的表单就实现了。
自定义样式
redux-form-dropzone 提供了可定制的外观，并可以支持各种样式和主题。
这里提供一个自定义样式的示例：
-- -------------------- ---- -------
----- ----------- - -- ------ ----- ----- - -------- ----- - -- -- -
------ -
-----
-------------------
-----
---------
-----------------
-----------------------
--------------------
-
-----------------------------
-----------
-------- -- ----- -- ---------------------
------
------
--
--在 Dropzone 中传入了 className 属性，指定了该组件的样式。
在页面的样式表中，定义 .dropzone 的样式：
-- -------------------- ---- ------- --------- - ------- --- ------ -------- -------- ----- ------- ------ ------ ------ -------- ----- ---------------- ------- ------------ ------- ------- -------- ---------- ----- ------------ ----- ------ ----- -
进一步了解
redux-form-dropzone 已经提供了支持文件上传的集成方案，并且具有一定程度的可定制性。对于更高级的场景，可以通过改写 Dropzone 组件甚至是 DropzoneArea 组件来进一步定制和扩展。如果需要更好地了解和使用 redux-form-dropzone，可以查看它的官方文档或者源代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554c081e8991b448d1f55