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