Redux-Form 是一个用于处理 React 表单中状态管理和验证的库。与传统表单处理相比，Redux-Form 在表单状态管理和验证方面有显著的优势，特别是在大型应用程序中使用。本文将深入介绍 Redux-Form 的用法和原理，帮助读者了解如何在使用 Redux-Form 时表单验证和提交。
Redux-Form 基础
Redux-Form 提供了一种以 Redux Store 为中心的表单解决方案，Redux Store 用于控制表单的状态和验证。将表单状态同步到 Redux Store 中，Redux-Form 通过它的 reducer 存储表单值。表单的值是一组 key-value 对，它们被称为表单字段。
Redux-Form 的核心特性是提供了一些组件（Field）和 Higher-order Components（HOC），这些组件提供了可复用性强、类型安全、高度可定制的表单组件。
Field 组件
Field 组件是 Redux-Form 中最重要的组件之一。Field 组件可以包装组件并为这些组件设置元数据，例如验证、格式化和引导。在表单中，每个表单控件都是 Field 组件的实例。Field 组件接受许多的参数，其中最重要的三个参数是：
- name：一个字符串，指定控件与表单中的字段名的对应关系。
- component：一个 React 组件，由 Field 组件包装的表单控件。
- validate：字段验证规则。
HOC
除了 Field 组件外，Redux-Form 还提供了其他一些 HOC，包括：
- reduxForm：用于在 Redux Store 中注册表单，并将表单作为 props 提供给包装组件。
- formValueSelector：用于从 Redux Store 中选择表单值。
- formValues：用于将表单值作为 props 提供给包装组件。
表单验证
表单验证是任何 Web 应用程序的基本功能之一。在传统的 React 应用程序中，表单验证通常由组件本身或表单级别的状态管理。然而，这种方式并不可靠，特别是在一个大型且复杂的表单中。
上一个示例：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--------- ---
----------- ---
-------------- --
-
-
------------ - -- -- - --- -
------------ - ------- -- -
----- -------- - ---
--------------------------- - -------------------
------------------------
--
------------ - -- -- -
----- ------ - ---------------------------------------
--- ---------- - ---
--- ------------- - ---
-- --------------------------------- -
---------- - -------- ----- --------
-
-- --------------------------- - -- -
------------- - --------- ---- ---- - -- ---- -----------
-
-- ----------- -- -------------- -
-------------------------- ----------------
------ ------
-
------ -----
--
---------
------ -
----- -----------------------------
------
-----------
------------
------------------------
----------------------------
--
------- --------------------- --------
--- --
------
---------------
---------------
---------------------------
----------------------------
--
------- ------------------------ --------
--- --
------- ------------------ -----------
-------
--
-
-在这个示例中，我们使用 React 表单控件 Input 组件，并在组件内部处理了表单的验证，而并没有使用 Field 等 Redux-Form 的核心组件。
使用 Redux-Form，表单验证及其相关的处理变得更加简单。通过使用 Field、validate 参数和 reduxForm，开发人员可以轻松创建可重用的和类型安全的验证组件。下面的代码示例演示了如何使用 Redux-Form 实现一个基本的登录表单。
安装：
npm install redux-form -S
在你的action中设置登录
-- -------------------- ---- -------
------ - --------------- - ---- -------------
----- ----- - -- -- --- --------------- -- ------------------- ----
-------- -------------- -
------ ------------------- -- -
-- -------- ------ -------
-- -------------- -------------------------------------- -
----- --- -----------------
------ ------ ------- -------
------- ------ --------
--
- ---- -
----------------- -------------------------------------- ----- -----
-
--
-
------ ------- ------定义：
-- -------------------- ---- -------
------ - ------ --------- - ---- -------------
----- -------- - -------- -- -
----- ------ - ---
-- --------------- -
------------ - ------ -- ----------
-
-- ------------------ -
--------------- - --------- -- ----------
-
------ -------
--
----- ----------- - --
------
------
-----
----- - -------- ----- --
-- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
--
----- --------- - ------- -- -
----- - ------------- ---------- - - ------
------ -
----- ------------------------
------
------------
-----------
-----------------------
-------------
--
------
---------------
---------------
-----------------------
----------------
--
-----
------- ------------- ----------------------
---- ---
---------
------
-------
--
--
------ ------- -----------
----- ------------
---------
--------------
该表单使用 reduxForm HOC 创建，并包含两个 Field 组件，一个字段是 Email，另一个是 Password。validate 函数用于验证表单字段的正确性。如果该字段已完成并且有错误，则将该错误返回到组件的meta prop 中。handleSubmit回调函数用于处理表单提交。它创建一个 Promise，如果表单验证通过，就完成 Promise 并使用表单值进行业务逻辑处理。
结论
使用 Redux-Form 库建立表单验证和提交的过程改变了 React 的表单山谷，简化了开发者的表单编写，提供了更好的可维护性、灵活性和扩展性，特别是在大型应用程序中。Redux Form 是一个非常适合使用的可信任的库，通过它的组件消除了原始表单的痛苦。本文介绍了 Redux-Form 的基本知识，包括 Field 和其他 HOC，以及如何使用 Field 组件进行表单验证和提交。开发人员可以根据需要进一步学习并扩展这些组件，以创建更复杂和高度可定制的表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67390f1a317fbffedf14e6ea