在前端开发中，表单是不可避免的一个组件。然而，表单的校验和数据处理却是非常繁琐的部分。为了这一问题，reactjs 提供了 redux-form ，作为表单的管理框架。而 redux-form-joi 则是在 redux-form 的基础上，结合 Joi 校验库，提供了更加方便的表单校验和处理。
一、 redux-form-joi 的安装
安装 redux-form-joi 非常简单，只需要在项目的根目录中使用 npm 安装即可：
--- ------- ------ --------------
二、 redux-form-joi 的使用
redux-form-joi 的使用方式和 redux-form 的使用方式类似。只需要在表单组件中，引用 redux-form-joi 提供的结构和属性即可。
1. 定义表单结构
首先，我们需要定义表单的结构。首先，我们需要引入 redux-form-joi 提供的 reduxForm 函数：
------ ----------- ---- -----------------
然后，我们需要使用 reduxForm 函数来定义表单的结构。比如，我们要定义一个用户登录表单，包含两个字段：用户名和密码。那么，我们可以这样定义表单的结构：
----- --------- - ----- -- -
----- -------------- - ------
------ -
-----
-------------
----- ------------------------
-----
------ ------------------------------
------
---------------
-----------------
-----------
--------------------
--
------
-----
------ -----------------------------
------
---------------
-----------------
---------------
-------------------
--
------
-----
------- -------------------------
------
-------
------
--
--
------ ------- -----------
----- ------------
----------------- -
--------- -------------------------------------
--------- ------------------------------------
--
--------------在这段代码中，我们使用 reduxForm 函数定义了一个叫做 LoginForm 的表单组件。在 reduxForm 函数的参数中，我们定义了表单的名称 loginForm，以及表单的校验规则。这里我们使用了 Joi 校验库，对用户名和密码进行了必填校验，并且为用户名和密码分别定义了中文标签。
2. 表单的数据处理
定义完表单的结构后，我们还需要处理表单的数据。在 redux-form-joi 中，我们可以使用 submit 函数来处理表单的数据。比如，我们在登录表单中，需要将用户名和密码发送到服务器进行验证。那么，我们可以在 LoginForm 组件中定义 submit 函数来完成这个过程：
----- --------- - ----- -- -
----- -------------- - ------
----- ------ - ------ --------- -- -
-- ----- -----------------
------------------
--------------
--
------ -
-----
-------------
----- --------------------------------
-----
------ ------------------------------
------
---------------
-----------------
-----------
--------------------
--
------
-----
------ -----------------------------
------
---------------
-----------------
---------------
-------------------
--
------
-----
------- -------------------------
------
-------
------
--
--在这段代码中，我们在 LoginForm 组件中定义了一个 submit 函数。在这个函数中，我们可以处理表单提交后的数据。比如，在这个例子中，我们将表单的数据输出到控制台，并且弹出一个提示框，表示登录成功。
3. 表单的校验信息展示
最后，我们需要将表单的校验信息展示给用户。在 redux-form-joi 中，我们可以使用 Field 组件的 meta 属性来获取表单的校验信息，并且使用 error 属性将校验信息展示给用户。比如，在下面的代码中，我们将 Field 组件的 error 属性设置为 meta.touched && meta.error，这样当输入框失去焦点并且校验出错时，校验信息就会被展示给用户。
----- --------- - ----- -- -
----- -
-------------
---------
-----------
------
- - ------
----- ------ - ------ --------- -- -
-- ----- -----------------
------------------
--------------
--
------ -
-----
-------------
----- --------------------------------
-----
------ ------------------------------
------
---------------
-----------------
-----------
--------------------
------------------- -- -----------
--
------
-----
------ -----------------------------
------
---------------
-----------------
---------------
-------------------
------------------- -- -----------
--
------
-----
------- ------------- ------------------ -- ------------
--
---------
------
------ -- ---- --------------------------------
-------
------
--
--三、 总结
redux-form-joi 是一个非常方便的表单校验和处理库。在使用 redux-form-joi 的过程中，我们需要注意以下几点：
- 定义表单结构时，需要将表单的校验规则定义在
validationSchema中； - 处理表单数据时，需要在表单组件中定义
submit函数； - 展示表单的校验信息时，可以使用
Field组件的error属性来获取校验信息。
使用 redux-form-joi 可以极大地简化表单的处理过程，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601581e8991b448de299