介绍
react-redux-form 是一个 React 组件库，用于构建基于 Redux 的表单。它提供了一组高度可定制的表单元素，可以轻松地处理表单验证、异步提交等常见需求。
本文将介绍如何使用 react-redux-form 构建一个简单的登录表单，并展示其相关特性和用法。
安装
首先需要使用 npm 或 yarn 安装 react-redux-form：
npm install react-redux-form
或
yarn add react-redux-form
快速上手
创建表单组件
首先在 React 中创建一个表单组件：
-- -------------------- ---- -------
------ - -------- ---- - ---- -------------------
-------- ----------- -
------ -
----- --------------
-----
-------------------
------------- ----------------- --
------
-----
------------------
----------------- ----------------- --
------
------- -------------------------
-------
--
-
------ ------- ----------上述代码定义了一个 LoginForm 组件，并包含两个输入框（分别是用户名和密码），以及一个登录按钮。这里通过 Control.text 和 Control.password 来创建输入框。
同时，这里使用了 Form 组件来包裹所有表单元素。通过传入 model 属性，我们指定了表单模型的名称为 login。
设定表单提交处理函数
接下来，我们需要设定一个处理表单提交的函数。首先，在组件外部定义该函数：
function handleSubmit(values) {
console.log('提交的表单数据：', values);
}然后，在 Form 组件中使用该函数：
<Form model="login" onSubmit={handleSubmit}>
...
</Form>这里通过 onSubmit 属性将 handleSubmit 函数传入 Form 组件。
运行表单
最后，在应用程序中运行表单：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ----------- - ---- -------------------
------ --------- ---- --------------
----- ----------- - -----------------
----------------
------ - --------- --- --------- -- --
---
---
----- ----- - -------------------------
-------- ----- -
------ -
--------- --------------
---------- --
-----------
--
-
------ ------- ----上述代码中，我们创建了一个 Redux store，并使用 createForms 函数生成包含表单模型的 reducer。然后，在应用程序中使用 Provider 组件来提供该 store，并渲染 LoginForm 组件。
现在，你已经成功地构建了一个简单的登录表单！
表单验证
除了基本的表单控件之外，react-redux-form 还提供了一些内置的验证器和自定义验证器，可以让你轻松地实现表单验证功能。
内置验证器
例如，假设我们需要验证用户名和密码均不能为空。这时可以使用 required 内置验证器：
<div>
<label>用户名：</label>
<Control.text model=".username" validators={{ required: (val) => val && val.length }} />
</div>
<div>
<label>密码：</label>
<Control.password model=".password" validators={{ required: (val) => val && val.length }} />
</div>在这里，我们使用了 validators 属性来定义内置验证器。其中，required 验证器接受一个函数作为参数，并在该函数中判断是否满足要求。
自定义验证器
除了内置验证器外，react-redux-form 还支持自定义验证器。例如，假设我们需要验证密码长度应不少于 6 个字符。这时可以使用自定义验证器：
function validatePassword(val) {
if (!val || val.length < 6) {
return '密码长度
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/34396) ，转载请注明来源
[https://www.javascriptcn.com/post/34396](https://www.javascriptcn.com/post/34396)