1. 什么是 @luontola/redux-form
@luontola/redux-form 是一个基于 Redux 的表单处理组件库，它提供了许多方便的 API 和实用的表单控件，能够帮助开发者快速地构建出优雅、高效的表单。
2. 安装
@luontola/redux-form 的安装非常简单，只需要在命令行中执行以下命令即可：
npm install @luontola/redux-form --save
3. 基本使用
3.1. 表单的构造
在使用 @luontola/redux-form 之前，我们需要先创建一个表单，其中需要包含需要收集的信息和验证规则。下面是一个简单的表单构造示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -----------------------
----- -------- - ----- -- ------ - --------- - -----------
----- --------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --------------------- --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --------------------- --
------
------- -------------------------
-------
--
--
------ ------- -----------
----- ------- -- -----
--------------在上面的代码中，我们使用 Field 组件来定义表单中需要收集的字段，通过在 Field 中传入相应的 name 参数和验证规则，我们便可以收集到我们需要的信息，并完成表单的验证。
3.2. 表单的提交
在表单构造完成之后，我们需要对表单进行提交操作。@luontola/redux-form 提供了名为 handleSubmit 的 API 来处理表单的提交。我们可以在组件的 onSubmit 事件中来调用这个 API 来提交表单。
-- -------------------- ---- -------
------ --------- ---- --------------
----- -------------- ------- --------- -
------ - ------ -- -
-- --------------
--------------------
--
-------- -
------ ---------- ---------------------- ---
-
-在这个示例中，我们定义了一个 submit 方法来处理表单的提交，在这个方法中，我们可以调用后台接口来进行登录操作。在组件的 render 方法中，我们嵌套了 LoginForm 组件，并传入了 onSubmit 方法，在 LoginForm 组件中，我们便可以通过 props 来访问 onSubmit 方法，从而完成表单的提交。
4. 高级使用
除了最基本的组件之外，@luontola/redux-form 还提供了许多其它实用的 API，这些 API 不仅包括更复杂的表单组件，还包括一些能够帮助我们更好地管理表单数据和控制表单行为的函数。
4.1. 表单的初始化
我们可以使用名为 initialize 的 API 来初始化表单的值，这个 API 接受一个对象作为参数，其中包含的键值对将会被作为表单的初始值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- ---------- - ---- -----------------------
----- ----------- - -
--------- -------
--------- --------
--
----- -------- - ----- -- ------ - --------- - -----------
----- --------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --------------------- --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --------------------- --
------
------- -------------------------
-------
--
--
------ ------- -----------
----- ------- -- -----
--------------
------------------- ------------- -- -----在上述示例中，我们在渲染表单组件之前，调用了 initialize 方法来初始化表单，我们传入了表单名 login 和初始值 initialData。
4.2. 表单的重置
我们可以使用名为 reset 的 API 来重置表单的值，这个 API 接受一个对象作为参数，其中包含的键值对将会被作为表单的初始值。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ ---------- ----- - ---- -----------------------
----- -------- - ----- -- ------ - --------- - -----------
----- --------- - ----- -- -
----- - ------------- ----- - - ------
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --------------------- --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --------------------- --
------
------- -------------------------
------- ------------- ---------------------------
-------
--
--
----- -------------- ------- --------- -
------ - ------ -- -
-- --------------
--------------------
--
-------- -
------ ---------- ---------------------- ---
-
-在上述示例中，我们定义了一个 reset 方法来处理表单的重置操作，在组件的 render 方法中，我们传入了 reset 方法，当用户点击重置按钮时，便可以调用该方法来重置表单值。
4.3. 表单的获取
我们可以使用名为 formValueSelector 的 API 来获取表单的值，这个 API 接受表单名和需要获取的字段名作为参数，并返回一个函数，这个函数可以用来获取指定的字段值。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ ---------- ----------------- - ---- -----------------------
------ - ------- - ---- --------------
----- -------- - ----- -- ------ - --------- - -----------
----- --------- - ----- -- -
----- - ------------- ------ ------------- - - ------
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --------------------- --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --------------------- --
------
-----
-------------------------------
------
------- -------------------------
------- ------------- ---------------------------
-------
--
--
----- -------- - ---------------------------
----- --------------- - ----- -- -
------ -
-------------- --------------- -----------
--
--
----- ------------------ - ------------------------------------
----- -------------- ------- --------- -
------ - ------ -- -
-- --------------
--------------------
--
-------- -
------ ------------------- ---------------------- ---
-
-在上述示例中，我们定义了一个 selector 函数，通过调用 formValueSelector 和表单名 login 以及需要获取的字段名 username 来获得一个函数，这个函数可以用来获取 username 字段的值。在组件中，我们将这个值注入到了 props 中，从而可以在组件中使用这个值。
5. 总结
通过本文的介绍，我们可以发现，@luontola/redux-form 提供了非常实用的 API 和组件，能够帮助我们快速地构建出高效、优雅的表单，大大提高了我们的开发效率和代码质量。希望这篇文章对你有所帮助，感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc8967216659e24459e