在现代 web 开发中，前端页面交互需要与后端数据交互，因此数据处理是不可避免的一部分。而 Redux 是一个非常流行的数据处理框架，它的 ViewModel 设计模式可以非常有效的管理数据操作。而 Redux-form 又是一个用来处理表单的 React 组件库，它和 Redux 结合使用可以让表单操作变得非常高效。
在本篇教程中，我们将介绍如何使用npm 包 @prismamedia/redux-form，它是 Redux-form 的一个很好的衍生版本，并且提供了更多高级功能。接下来我们将重点介绍它的使用方法，并提供一些示例代码以帮助你更好的理解它。
安装
首先，你需要安装 @prismamedia/redux-form 包。可以通过 NPM 或 Yarn 来安装，这里我们以 NPM 为例：
--- ------- ----------------------- ------
表单配置
表单的配置通常包含以下部分：
Form
Form 是一个 React 组件，用来定义表单。它可以接收一个名为 onSubmit 的处理函数，用来处理表单提交。
------ ----- ---- --------
------ - ------ --------- - ---- --------------------------
----- ------ - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
-----
------- -----------------------------
------
-------
--
--
------ ------- -----------
----- --------
-----------这里，我们定义了一个名为 MyForm 的组件，使用了 @prismamedia/redux-form 中的 Field 和 reduxForm 方法。其中，Field 是一个用来创建 Redux-form 表单域的组件，它的 name 属性定义了值的名称，component 属性定义了表单域类型。reduxForm 方法用来连接表单和 Redux 状态管理器。
Field
Field 组件用来创建 Redux-form 表单域，它有以下属性：
- name: string 表单域的名称，和表单域中的值关联
- component?: React.ReactType | string | ComponentClass | StatelessComponent 表单域的组件类型
- format?: (value: any, name: string) => any 将值转换为表单域格式的函数
- normalize?: (value: any, previousValue: any, allValues: Object, previousAllValues: Object) => any 对值进行标准化的函数
- parse?: (value: any, name: string) => any 将表单域格式的值转换为原始值的函数
- props?: Object 传递给 component 属性的附加属性
我们通过 Field 组件将表单域和 Redux-form 绑定，每个 Field 组件需要提供一个 name 属性，用来关联表单数据到 Redux 状态管理器。
表单提交
表单提交需要一个处理函数，这个函数可以通过 props 或 connect 函数提供。下面的示例代码演示了如何在组件上使用 props 来绑定表单提交函数：
------ ----- ---- --------
------ - ------ --------- - ---- --------------------------
----- ------ - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
------ -
----- --------------------------------
---
-------
--
--
------ ------- -----------
----- --------
-----------在这个示例中，我们定义了一个 submit 函数，用来处理表单提交。并通过创建的表单组件将其传递给 handleSubmit 函数，这个函数会在表单提交时触发。
结语
到这里，我们已经介绍了如何使用 @prismamedia/redux-form 处理表单。这个库提供了一些高级的表单功能，例如异步验证、动态表单、多步表单等，你可以在官方文档中了解更多。
在编写 React 应用时，表单操作是一个非常重要且必须掌握的技能。希望这篇文章能够帮助到你掌握 @prismamedia/redux-form 库的使用方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055feb81e8991b448dd9d0