在网页应用中，表单管理是一个基本且重要的功能。但是，随着应用复杂度的增加，表单管理会变得越来越棘手。Redux Form 是一个非常优秀的库，用于解决表单管理的问题。
本文将向您介绍 Redux Form 的基本概念、使用方式以及常见问题，帮助您在前端开发中更好地利用 Redux Form。
Redux Form 的基本概念
Redux Form 是一种基于 Redux 的表单管理库，它的基本思路是将表单中的各种状态，比如字段值、对错误的处理、字段可用性等等，都放到 Redux Store 中管理。这样可以有效地解耦表单组件与状态管理器，使得表单使用更加灵活和可维护。
Redux Form 相关术语：
- Field：字段是表单中最基本的单元，比如输入框、下拉框等等。
- Form：表单是一组字段的集合，通常表单都有一个名字，用于标识表单。Redux Form 管理多个表单状态，每个表单状态可以通过不同的表单名称进行访问，类似于 Redux 中的“模块化”思路。
- Form Value：表单值是一组键值对，表示表单中各个字段的值。
- Form Props：表单属性是通过
reduxForm()API 设置的，用于配置表单的各个属性。
Redux Form 的使用
接下来，我们将通过一个具体的示例来演示 Redux Form 的使用。
安装依赖
在开始之前，请确保您安装了 react-redux 和 redux-form 两个依赖库。您可以通过下面的命令进行安装：
npm install react-redux redux-form --save
创建表单组件
我们来创建一个包含输入框和提交按钮的表单组件 ContactForm。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------ --------- - ---- ------------
----- ----------- ------- --------- -
-------- -
----- - ------------ - - ----------
------ -
----- ------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
-
-
-
----------- - -----------
----- ----------
---------------
------ ------- -----------我们在 ContactForm 组件中使用了 Field 组件，该组件表示一个表单字段。通过 name、component 就可以定义该字段的名称和类型。在这个例子中，我们在表单中添加了一个输入框，它的名称是 “firstName” 以及一个类型为文本串。
此外，我们还需要将 ContactForm 通过 reduxForm() API 注册，以便在 Redux Store 中管理。
使用表单组件
现在我们已经创建了 ContactForm 表单组件，下一步我们可以在应用中使用它了。我们创建一个父组件 App，用来嵌套 ContactForm。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ ----------- ---- ---------------
----- ----- - -------------- -- ---
----- --- ------- --------- -
------ - ------ -- -
--------------------
-
-------- -
------ -
--------- --------------
---- ----------------
------------ ---------------------- --
------
-----------
-
-
-
------ ------- ---在 ContactForm 上，我们添加一个 onSubmit 回调函数，当表单提交时，该函数将被调用，打印表单值（即前面提到的 “Form Value”）。
预填表单
有时，我们需要在表单中预填一些值，例如用户信息编辑场景。在 Redux Form 中，我们可以通过 initialValues 属性来实现预填表单。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------ --------- - ---- ------------
----- ----------- ------- --------- -
-------- -
----- - ------------ - - ----------
------ -
----- ------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
-
-
-
----------- - -----------
----- ----------
-------------- -
---------- -------
--------- ------
--
---------------
------ ------- -----------校验表单
在表单应用中，表单校验是一个重要的功能。Redux Form 提供了表单校验的支持。我们可以在 ContactForm 组件中添加一个 validate 函数，用于验证表单字段，在组件中提交表单时将自动被调用。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------ --------- - ---- ------------
----- ----------- ------- --------- -
----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
-
-------- - ------ -- -
--------------------
-
-------- -
----- - ------------ - - ----------
------ -
----- ---------------------------------------
------
----------------
-----------
----------------------------
------------ -----
--
------
---------------
-----------
----------------------------
----------- -----
--
------- -----------------------------
-------
-
-
-
----- -------- - ------ -- -
----- ------ - --
-- ------------------- -
---------------- - ----------
-
-- ------------------ -
--------------- - ----------
-
------ ------
-
----------- - -----------
----- ----------
---------
---------------
------ ------- -----------我们可以在以下情况下执行字段验证：
- 表单加载时：
validate()在组件加载时被调用，从而使表单中每个字段都被验证一次。 - 字段失焦时：当有字段失焦时，
validate()将不再执行，它只会在提交时被调用。如果需要对字段失焦的验证，请使用onBlur()API。 - 提交时：
validate()在表单提交时被调用。
发送异步请求
在实际应用中，我们可能需要在表单提交时发送异步请求（比如添加或修改用户数据）。Redux Form 提供了发送异步请求的方法。我们可以通过创建 Promise 对象并在 handleSubmit 函数中调用该 Promise 达到发送请求的目的。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------ --------- - ---- ------------
----- ----------- ------- --------- -
----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
-
-------- - ------ -- -
------ --- ----------------- ------- -- -
------------- -- -
-------------------
---------
-- -----
--
-
-------- -
----- - ------------ - - ----------
------ -
----- ---------------------------------------
------
----------------
-----------
----------------------------
------------ -----
--
------
---------------
-----------
----------------------------
----------- -----
--
------- -----------------------------
-------
-
-
-
----- -------- - ------ -- --
----------- - -----------
----- ----------
---------
---------------
------ ------- -----------在 onSubmit 函数中，我们首先创建一个 Promise 对象（这里使用 setTimeout() 模拟异步请求），然后将表单值作为参数进行传递。在组件中，我们通过调用 handleSubmit(props.onSubmit) 函数来异步发送请求，必须要使用 JavaScript 的异步调用方式，handleSubmit() 方法将会返回一个 Promise 对象，我们可以通过该对象来判断请求是否完成。
特别提示
- Redux Form 的版本正在迭代更新，请保持持续关注。
- Redux Form 的使用需要了解 Redux 的基本概念。如果您对 Redux 尚不熟悉，请先学习 Redux 的基础知识。
- 在实际应用中，您需要注意 Redux Form 的性能问题，特别是在组件数量较多的情况下，过度使用 Redux Form 会导致性能问题。可以将 Redux Form 与 React 的
shouldComponentUpdate生命周期一起使用，以提高组件性能。 - 文章中的示例代码是针对简单场景构建的，实际应用可能需要更复杂的处理逻辑。大型表单需谨慎使用 Redux Form，确保所有需求都能被满足。
总结
Redux Form 是一个强大的表单管理工具，它可以将表单中各种状态与 Redux Store 中进行解耦，提供了许多有用的方法和 API 来简化表单管理。本文的例子可以帮助您了解 Redux Form 的基本使用，它具有深度和学习价值，希望能为您提供指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c1a0448841e9894a6890e