Redux-Form 是一个用于 React.js 和 Redux 应用程序中管理表单状态的库。它允许您在 Redux 存储中存储所有表单状态，并自动处理表单值、验证和提交。在本文中，我们将介绍 Redux-Form 的基本用法以及如何使用它来处理输入、验证和提交，以及如何在页面中使用表单组件。
安装和设置
- 安装 Redux-Form：
npm install redux-form --save
- 将 Redux-Form 添加到 Redux 应用程序中：
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- -------- ------ - ------- -- ----------- - ---- ------------- ----- ----------- - ----------------- ----- ----------- --- ----- ----- - ------------------------- ------ ------- ------
创建一个表单
我们将创建一个包含三个输入域的表单。这些输入域将用于收集姓名、邮箱和密码。在 React.js 中创建表单时，需要处理每个字段的值、验证和提交状态。Redux-Form 可以为我们处理所有这些事情。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- ------------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
-- --------------- -
------------ - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
----- ----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
--
--- ---------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
------ ---------------- ----------------------- ----------- ------------ ----- --
------ --------------- ----------------------- ----------- ----------- ----- --
------ ------------ ----------------------- ------------ ------------- --
------ --------------- ----------------------- --------------- ---------------- --
------- ------------------ -----------
-------
--
--
---------- - -----------
----- -------------
---------
---------------
------ ------- -----------连接表单到 Redux 应用
我们需要将表单连接到 Redux 应用程序，以便将表单值存储在 Redux 存储中，并检索它们以供后续使用。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------
------ - -------- - ---- --------------
------ ----- ---- ----------
----- --- - -- -- -
--------- --------------
----------- ---------------- -- -------------------- --
-----------
--
------ ------- ----以上代码段中，我们将 <SignUpForm> 组件包装在 <Provider> 组件中，并将 Redux 应用程序传递给 <Provider>，这样可以确保表单访问 Redux 存储。
表单验证
Redux-Form 提供了一个内置的验证器，它可以处理表单中的验证。验证器只需要接收表单值并返回一个对象，其中包含任何无效的输入字段和消息。
在上面的代码中，我们定义了一个 validate 函数来处理验证。这个函数将接收表单的值作为参数，然后返回一个对象，其中包含任何验证错误。
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
-- --------------- -
------------ - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--获取表单值和提交表单
Redux-Form 不仅使表单验证变得简单，还提供了内置的提交处理程序。在我们的示例中，我们定义了一个 onSubmit 处理程序，在表单提交时调用。
const App = () => (
<Provider store={store}>
<SignUpForm onSubmit={values => console.log(values)} />
</Provider>
);在上面的示例中，我们只是使用 console.log() 语句在控制台上记录表单值。但是，在实际情况下，您可以将表单传递给服务器或任何其他处理方法。
结论
Redux-Form 是一个非常有用的库，它可以在 React.js 和 Redux 应用程序中为表单管理提供强大的解决方案。通过使用 Redux-Form，我们的表单状态将存储在 Redux 存储中，我们可以轻松地获取值、验证和提交表单。在实际开发中，使用 Redux-Form 可以大大减少编写和调试表单代码的时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b17c3ddd3a70eb6d1a227