在前端开发中，表单是常见的交互方式之一。随着应用规模的增长，表单的输入校验、联动、字段控制等问题会变得越来越复杂。针对这些问题，React 生态圈中有一个非常优秀的第三方库 - Redux Form，可以帮助我们解决许多复杂的表单问题。
在使用 Redux Form 时，我们经常需要自定义表单元素和表单校验规则。在这里，我们介绍一个基于 Redux Form 二次封装的 npm 包 - redux-form-giautm，可以更快速地完成表单相关开发。
安装
使用 npm 安装 redux-form-giautm： $ npm install redux-form-giautm --save
同时，需要确保已安装以下两个基础库：
- redux
- react-redux 或 preact-redux
使用
redux-form-giautm 提供了 createForm 函数，用于创建已封装好的带表单异步校验的表单组件。
createForm
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------
------ ---------- ---- --------------------
----- ------ ------- --------------- -
-------- -
------ -
------
-----
-------------------
------
---------------
-----------------
-----------
----------------------
--
------
-----
-----------------------
------
---------------
-----------------
---------------
----------------------
--
------
------- -----------------------------
-------
--
-
-
------ ------- ------------
----- ---------
-------------- -- -------- -- -- ----------------------------------------------
--------- -- -----------
-------- -------- ------ -- -- -
-- ---------- -
----- - --------- ------ --
-
---
-----------可以看到，我们只需要传入一个配置项，即可快速地创建一个表单组件。
其中，常用配置项如下：
form：必填，指定表单名称（在页面上可以同时渲染多个表单，需要保证表单名称的唯一性）。asyncValidate：选填，指定异步校验函数。在表单值改变后，会异步地调用该函数，校验表单值是否合法。如果不合法，可以抛出一个包含错误信息的对象（key 为表单项名称）。
getFieldError
除了上述异步校验方式外，redux-form-giautm 还为 Field 组件提供了一个 getFieldError 函数。通过该函数可以方便地获取某个表单项的校验错误信息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------
------ - ------------- - ---- --------------------
----- ---------- - ----- -- -
-----
----------------------------
------
----------
-----------------
--
-------------------------- ------------
------
--
------ ------- -----------
以上为一个自定义表单项组件，其中通过 getFieldError 函数获取 Field 组件的错误信息。注意，这里需要将 props.meta 属性作为第二个参数传入。 props.meta 包含了 Field 组件的相关属性，可以在 getFieldError 函数中做相关处理。
示例
接下来，我们结合一个简单示例来进一步理解 redux-form-giautm 的使用方式。
配置表单组件 - LoginForm.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------
------ ---------- ---- --------------------
----- --------- ------- ------------------- -
-------- -
------ -
----- -----------------------------------
-----
------ -------------------------------
------
---------------
-----------------
-----------
--------------------
--
------
-----
------ ------------------------------
------
---------------
-----------------
---------------
-------------------
--
------
------- ------------- ---------------------------------
---------------------- - -------- - -----
---------
-------
--
-
-
----- -------- - ------ -- -
----- ------ - ---
-- ------------------ -
--------------- - ----------
-
-- ------------------ -
--------------- - ---------
-
------ -------
--
------ ------- ------------
----- ------------
-------------- -- -------- -- -- ----------------------------------------------
--------- -- -----------
-------- -------- ------ -- -- -
-- ---------- -
----- - --------- ------ --
-
---
---------
--------------
使用 redux-form-giautm 提供的 createForm 函数创建表单组件，并在 validate 函数中进行同步校验，代码比较简单，这里不再赘述。
接下来，我们需要在 Redux 中设置表单的初始化数据和提交操作的逻辑。redux-form-giautm 提供了与 Redux 集成的 submitForm 和 initializeForm 函数，可以快速集成表单与 Redux 之间的关系。
配置 Redux 相关逻辑：
-- -------------------- ---- -------
-- ----------------------
------ ----- ----- - ------ -- -------- -- -
---------- ----- -------------- ---
------------- -- -
---------- ----- --------------- ---
-- ------
--
-- -----------------
------ - --------------- - ---- --------
------ - ------- -- ----------- - ---- -------------
----- ----------- - -----------------
----- ------------
-- -- -------
---
------ ------- ------------
-- ----
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ -------- ---- -------------------
------ --------- ---- -------------------------
----- ----- - --------------------- ------------------------
----------------
--------- --------------
---------- ---------------- -- ------------------------------ --
------------
------------------------------
--在相应的 Redux 操作中，通过 submitForm 将表单提交操作绑定到 Redux 中：
-- -------------------- ---- -------
-- ----------------------
------ - ---------- - ---- --------------------
------ ----- ----- - ------ -- -------- -- -
---------- ----- -------------- ---
-------------------- ------------
-------- -- -
------------- -- -
---------- ----- --------------- ---
-- ------
--
------------- -- -
---------- ----- ------------- ------ ---
---
--在页面的底部可以放置一个简单的表单提交状态提示组件 LoginStatus.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --------------- - ----- -- --
------------------------
----------- -----------------
---
----- ----------- - -- ---------- -- -- -
----- - ------------- ------ --------- - - -----------
-- -------------- -
------ ---------------
- ---- -- ------- -
------ ---- -------- ------ ----- ---------------------------
- ---- -- ----------- -
------ ---- -------- ------ ------- ---------------
- ---- -
------ -----
-
--
------ ------- --------------------------------------
在页面中使用 LoginForm 和 LoginStatus 组件即可完成登录操作和状态展示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ -------- ---- -------------------
------ --------- ---- -------------------------
------ ----------- ---- ---------------------------
----- ----- - --------------------- ------------------------
----------------
--------- --------------
---------- ---------------- -- ------------------------------ --
------------ --
------------
------------------------------
--以上代码的效果预览：https://codesandbox.io/s/redux-form-giautm-example-dg6qr
结语
本文介绍了如何使用 npm 包 redux-form-giautm 更快速地完成表单相关开发，自带表单异步校验功能，可以让表单的开发更加快捷高效。同时，我们以一个简单的登录表单为例，结合具体的代码演示，深度解读了 reducer、action、组件和第三方库间的协作方式。
希望能对大家有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589d81e8991b448d5e3c