Redux-Form-Lite 是一个轻量级的 React 表单组件，能够帮助前端开发者轻松构建复杂表单并管理表单状态。本教程将介绍如何使用 npm 包 Redux-Form-Lite 编写表单，并通过深入分析其内部实现，帮助读者理解 React 表单管理的工作原理。
安装 Redux-Form-Lite
在项目目录中通过 NPM 安装 Redux-Form-Lite
npm install redux-form-lite --save
使用 Redux-Form-Lite
Redux-Form-Lite 的核心是将表单组件的状态存储到 Redux 的 Store 中，并将其实现为一个 Redux 的 Reducer。表单组件中所有的输入状态和表单状态都将被存储到 Redux 的 State 中。以下是一个简单的登录表单组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------ --------- - ---- ------------------
----- ----- - -- -- -
------
------
------------
-----------------
------------------ --------
------------
--
------
---------------
-----------------
----------------------
---------------
--
------- --------------
------
---------
-------
--
----- -------------- - -----------
----- --------
----------
------ ------- --------------------------在这个示例中，LoginForm 组件将表单的状态存储在名为 'login' 的 Redux-Form-Lite 的表单 State 内，您可以随时在应用程序中访问表单状态。
Redux-Form-Lite 的 props 如下：
reduxForm- 一个高阶函数，接收一个配置对象作为参数，用于将表单与 Redux Store 连接。Field- 表单输入组件，由 reduxForm 注入的 props 支持。
以下是 Login 组件中的 ``Field` '组件的名称和意义：
name- 输入字段的名称。component- 渲染表单输入组件的 React 组件。placeholder- 输入框的占位符。type- 输入框的输入类型。
另外注意的是，connect() 中的 LoginForm 组件是必须声明的，即便它为空，被 reduxForm() 包裹的组件必须要被传递给 connect()。
如何通过 Redux-Form-Lite 实现表单验证
由于 Redux-Form-Lite 将表单的状态存储在 Redux Store 中，因此可以通过 React + Redux 的提交状态（Redux Action），统一处理表单组件的验证和异常处理。以下是一个实现表单验证的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------ --------- - ---- ------------------
------ - ----------- - ---- -------------------
----- -------- - -------- -- -
----- ------ - ---
-- --------------- -
------------ - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
----- ----------- - --
------
------
-----
----- - -------- ----- -
-- -- -
-----
----------------------
-----
------ ---------- ----------- ------------------- --
-------- -- ----- -- ---------------------
------
------
--
----- ----- ------- --------- -
-------- -
----- - ------------- ---------- - - -----------
------ -
-----
----- ------------------------
------ ------------ ------------ ----------------------- ------------- --
------ --------------- --------------- ----------------------- ---------------- --
------- ------------- -------------------------------------
-------
------
--
-
-
----- -------------- - -----------
----- --------
---------
----------
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
------------ ------ -- -
----------------------------
--
---
------ ------- --------
----------------
-------------------
------------------需要注意的是 form 参数设置的值必须与最终在元素中设置的名字相同。validate 函数的输入值是每个表单输入组件中输入的值组成的对象，返回任何可能的验证错误提示，可以用以下方式设置：
- 如果验证通过，直接返回空的 errors
- 如果输入值错误，返回字符串类型的 errors，例如：
errors.email = 'Email is required'
validate 函数在每次输入值都会被调用，每当使用者开始键入电话号码时都能及时给出错误提示信息。
如何通过 Redux-Form-Lite 实现表单数据提交
谈到表单时，最常见需求就是将表单数据上送到服务端进行处理。在 Redux 中，我们需要将数据（即 action）分发到所依赖的 reducer 中，通过 Action 提交表单数据到远程 API，以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------ --------- - ---- ------------------
------ - ----------- - ---- -------------------
----- ----------- - --
------
------
-----
----- - -------- ----- -
-- -- -
-----
----------------------
-----
------ ---------- ----------- ------------------- --
-------- -- ----- -- ---------------------
------
------
--
----- ----- - -- ------------- ----------- ----------- -- -- -
-----
----- -------------------------------------
------ ------------ ------------ ----------------------- ------------- --
------ --------------- --------------- ----------------------- ---------------- --
------- ------------- -------------------------------------
-------
------
--
----- -------------- - -----------
----- --------
----------
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
------------ ------ -- ----------------------------
---
------ ------- --------
----------------
-------------------
------------------
handleSubmit 方法将会处理简单的表单内容于 action 完成形成一个新的 dispatch。通过修改 loginAction，您可以轻松将表单数据提交到远程 API。
总结
使用 Redux-Form-Lite 可以帮助开发者在 React 应用中高效地编写复杂表单，并管理表单状态。在本文中，我们通过一个简单的登录表单示例，介绍了 Redux-Form-Lite 的使用方法、如何加入表单验证和服务端数据提交等技术内容。希望能够帮助读者更好地理解 React 表单管理状态的内部工作原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d05