什么是 redux-form-field
redux-form-field 是一个针对 React 和 Redux 开发的表单处理库，可以帮助我们优雅的处理复杂的表单验证、数据传递等操作。使用 redux-form-field 可以用更少的代码实现更复杂的操作，提高代码复用率和可维护性。
安装 redux-form-field
安装 redux-form-field 可以通过 npm 安装：
npm i redux-form-field
基本用法
Field 组件
使用 redux-form-field 时需要使用到其提供的 Field 组件。Field 提供了一个包含表单需要的所有属性的对象，可以通过 Field 组件来获取这些属性。一个简单的使用案例如下：
-- -------------------- ---- -------
------ - ----- - ---- ------------------
-------- ----------- -
------ -
------
------ -------------------------------
------ --------------- ----------- --
------ ------------------------------
------ --------------- --------------- --
------- -------------------------
-------
-
-使用 Field 组件时需要传入一个 name 属性，该属性为字段的名称。Field 还提供了其他属性，如 type、placeholder、value、onChange 等等，可以按需使用。
Form 组件
在使用 redux-form-field 时还需要使用 Form 组件。Form 组件需要和 Field 组件一起使用，它会将所有的 Field 组件的值存储在 Redux store 中，并提供一个 onSubmit 回调函数。
一个简单的使用案例如下：
-- -------------------- ---- -------
------ - ----- ----- - ---- ------------------
-------- ---------------- -
----- - ------------ - - -----
----- -------- - -------- -- -
-------------------- -- --------
-
------ -
----- ----------------------------------
------ -------------------------------
------ --------------- ----------- --
------ ------------------------------
------ --------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- -----------
-------------Form 组件需要传入一个 onSubmit 属性，该属性为表单提交时的回调函数。同时还需要在 Form 的外层使用 reduxForm 进行包装，并传入一个 form 属性，该属性为表单的名称，用于与 Redux store 中的表单数据进行关联。
取值和校验
在使用 redux-form-field 时，我们可以通过 Field 组件获取表单的所有属性和值，并且可以对这些值进行校验。
-- -------------------- ---- -------
------ - ----- ----- - ---- ------------------
-------- ---------------- -
----- - ------------ - - -----
----- -------- - -------- -- -
-------------------- -- --------
-
----- -------- - -------- -- -
----- ------ - ---
-- ------------------ -
--------------- - ---------
-
-- ------------------ -
--------------- - --------
-
------ -------
-
------ -
----- --------------------------------- --------------------
------ -------------------------------
------ --------------- ----------- --
------ ------------------------------
------ --------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- -----------
-------------在 Form 组件中传入一个 validate 属性，并定义一个 validate 函数即可对字段进行校验，如果返回一个非空对象，redux-form-field 会认为表单校验失败，并将错误信息以一个名为 _error 的 key 保存在表单数值对象内。
高级用法
使用 redux-form-field 还可以实现更多的高级功能，比如：异步校验、手动设置数据、动态添加删除字段、多种校验等等，有更多的使用可以参考官方文档。
总结
使用 redux-form-field 可以大大简化表单的处理，并提高代码复用率和可维护性。在使用过程中只需要掌握基本用法即可，并根据业务需要来选择高级功能的使用，以达到更优秀的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581a81e8991b448d5406