简介
@schleumer/redux-form 是一个方便的 Redux 表单管理应用。它是基于 Redux 和 React 的组件编写而成，旨在提供一种更加简单和直观的方式来管理表单数据。本篇文章将介绍使用该包来创建、验证和提交表单数据，以及如何处理数据集。
安装
在使用 @schleumer/redux-form 之前，需要确保已经安装了以下软件包：
- React
- Redux
- react-redux
可以使用 npm 包来安装这些软件包:
npm install react react-dom react-redux redux @schleumer/redux-form
这将会下载并安装所有依赖包。
创建表单
在创建表单之前，需要确定表单所需要的输入的类型和名称。在 React 中，表单通常通过使用 input, select 和 textarea 元素来创建，可以使用@schleumer/redux-form 的 Field 组件来实现。该组件自动设置与 Redux 表单状态之间的联系并为你完成验证和错误信息的显示。
下面是一个基本的表单示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- ------------------------
----- ------ ------- --------------- -
-------- -
------ -
----- -----------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
-
-
------ - -----------
----- --------
-----------
------ ------- -------注意，该组件被包含在reduxForm函数的封装器中，这个函数提供了一些默认的功能，例如连接状态和派发 Redux Action 等。
验证表单数据
@schleumer/redux-form 提供了多种验证表单数据的方法，如必填字段、比较数据、长度与模式等。通过 reduxForm() 高阶函数中传入的 validate 属性即可设置表单验证规则。
下面是一个使用表单验证的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- ------------------------
------ -------- ---- -------------
----- ------ ------- --------------- -
-------- -
----- - ------------ - - -----------
------ -
----- ------------------------
-----
------ ------------------------- -------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- -------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
-
-
------ - -----------
----- ---------
--------
-----------
------ ------- -------在上面的示例中，我们增加了一个名为 validate 的验证器函数，并在 reduxForm() 函数中注册，这将自动验证表单中的 firstName 和 lastName 字段是否为空。验证器函数将返回一个对象，用于指定哪些字段出现错误，并存储这些错误信息。例如：
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
------ ------- ---------处理表单数据
表单数据在提交时，将会传递给提交函数。使用 Redux 来处理这些数据尤其重要，因为在视图和数据之间建立了固定的联系，且状态的更改只能通过派发 Action 来实现。
在 @schleumer/redux-form 中，可以通过 onSubmit 属性设置提交表单后的回调函数，该函数将在表单数据验证通过后被调用。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- ------------------------
------ -------- ---- -------------
----- ------ ------- --------------- -
------ - ------ -- -
--------------------
--
-------- -
----- - ------------ - - -----------
------ -
----- -------------------------------------
-----
------ ------------------------- -------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- -------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
-
-
------ - -----------
----- ---------
--------
-----------
------ ------- -------在上面的示例中，我们设置了 this.submit 作为表单提交回调函数，当表单通过验证时，该函数将被自动触发，并接收表单数据作为其唯一参数。在这里，我们使用了 console.log() 来打印表单数据到控制台中。
示例代码
下面是一个完整的示例代码块：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- ------------------------
------ -------- ---- -------------
----- ------ ------- --------------- -
------ - ------ -- -
--------------------
--
-------- -
----- - ------------ - - -----------
------ -
----- -------------------------------------
-----
------ ------------------------- -------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- -------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
-
-
------ - -----------
----- ---------
--------
-----------
------ ------- -------结论
在本文中，我们介绍了如何使用@schleumer/redux-form 创建、验证和提交表单数据。此外，我们还讨论了使用高阶函数来注册表单组件、在 validate 函数中指定表单验证规则以及在提交回调中处理表单数据。
希望这篇文章能够对您的 React 前端开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7d238a385564ab6a79