在 React 应用中，表单是常见的组件之一。Redux 是一个很好的状态管理工具，但它并不适合处理表单数据。Redux-Form 是一个 Redux 插件，它提供了更好的方式来处理表单数据和验证。
本文将介绍如何使用 npm 包 redux-form，包括安装、配置和使用方法，并提供示例代码。
安装
可以使用 npm 或 yarn 安装 redux-form：
npm install redux-form
或者：
yarn add redux-form
配置
要使用 redux-form，你需要将其连接到 Redux 应用程序中。在 src 目录下新建一个 store.js 文件，并添加以下内容：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ - ------- -- ----------- - ---- ------------ ----- ----------- - ----------------- -- -- ---------- ----- ----------- -- ----- ----- - ------------------------ ------ ------- -----
在上面的代码中，我们导入 createStore 和 combineReducers 函数，以及 reducer 对象。然后，我们创建一个 rootReducer，其中包含一个名为 form 的属性，该属性由 formReducer 处理。最后，我们使用 createStore 函数创建一个 Redux store，并将 rootReducer 传递给它。
使用
现在我们已经将 redux-form 添加到应用程序中，接下来就可以使用它了。在这里，我们将展示一个简单的登录表单示例。
首先，在 src 目录下创建一个名为 LoginForm.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ --------- - ---- ------------
----- --------- - ----- -- -
----- - ------------ - - -----
------ -
----- ------------------------
-----
------ -------------------------------
------ --------------- ----------------- ----------- --
------
-----
------ ------------------------------
------ --------------- ----------------- --------------- --
------
------- -------------------------
-------
-
-
------ ------- -----------
----- -------
-------------在上面的代码中，我们导入 React、Field 和 reduxForm。然后，我们定义了一个名为 LoginForm 的组件，它接受一个名为 handleSubmit 的属性。该组件包含一个包装在 form 标签中的表单，其中有两个 Field 组件，分别对应于用户名和密码输入框。最后，我们使用 reduxForm 函数将 LoginForm 包装起来，并将表单名称设置为 'login'。
接下来，在 src 目录下创建一个名为 LoginPage.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ --------- ---- -------------
----- --------- - ----- -- -
----- - ------------ - - -----
----- -------- - ------ -- -
-------------------
-
------ -
-----
-----------
---------- --------------------------------- --
------
-
-
----- --------------- - ----- -- ----
------ ------- -----------------------------------在上面的代码中，我们导入 React、connect 和 LoginForm。然后，我们定义了一个名为 LoginPage 的组件，它接受一个名为 handleSubmit 的属性。该组件包含一个标题和 LoginForm 组件。最后，我们使用 connect 函数将 LoginPage 连接到 Redux store 上。
示例演示
现在我们已经创建了一个简单的登录表单，可以在浏览器中查看它的工作方式。在 src 目录下创建一个名为 index.js 的文件，并添加以下内容：
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32565) ，转载请注明来源
[https://www.javascriptcn.com/post/32565](https://www.javascriptcn.com/post/32565)