npm 包 redux-form-giautm 使用教程

在前端开发中，表单是常见的交互方式之一。随着应用规模的增长，表单的输入校验、联动、字段控制等问题会变得越来越复杂。针对这些问题，React 生态圈中有一个非常优秀的第三方库 - Redux Form，可以帮助我们解决许多复杂的表单问题。

在使用 Redux Form 时，我们经常需要自定义表单元素和表单校验规则。在这里，我们介绍一个基于 Redux Form 二次封装的 npm 包 - redux-form-giautm，可以更快速地完成表单相关开发。

安装

使用 npm 安装 redux-form-giautm： $ npm install redux-form-giautm --save

同时，需要确保已安装以下两个基础库：

  • redux
  • react-redux 或 preact-redux

使用

redux-form-giautm 提供了 createForm 函数，用于创建已封装好的带表单异步校验的表单组件。

createForm

------ ----- ---- --------
------ - ----- - ---- -------------
------ ---------- ---- --------------------

----- ------ ------- --------------- -
    -------- -
        ------ -
            ------
                -----
                    -------------------
                    ------
                        ---------------
                        -----------------
                        -----------
                        ----------------------
                    --
                ------
                -----
                    -----------------------
                    ------
                        ---------------
                        -----------------
                        ---------------
                        ----------------------
                    --
                ------
                ------- -----------------------------
            -------
        --
    -
-

------ ------- ------------
    ----- ---------
    -------------- -- -------- -- -- ----------------------------------------------
        --------- -- -----------
        -------- -------- ------ -- -- -
            -- ---------- -
                ----- - --------- ------ --
            -
        ---
-----------

可以看到，我们只需要传入一个配置项，即可快速地创建一个表单组件。

其中，常用配置项如下：

  • form：必填，指定表单名称（在页面上可以同时渲染多个表单，需要保证表单名称的唯一性）。
  • asyncValidate：选填，指定异步校验函数。在表单值改变后，会异步地调用该函数，校验表单值是否合法。如果不合法，可以抛出一个包含错误信息的对象（key 为表单项名称）。

getFieldError

除了上述异步校验方式外，redux-form-giautm 还为 Field 组件提供了一个 getFieldError 函数。通过该函数可以方便地获取某个表单项的校验错误信息：

------ ----- ---- --------
------ - ----- - ---- -------------
------ - ------------- - ---- --------------------

----- ---------- - ----- -- -
    -----
        ----------------------------
        ------
            ----------
            -----------------
        --
        -------------------------- ------------
    ------
--

------ ------- -----------

以上为一个自定义表单项组件，其中通过 getFieldError 函数获取 Field 组件的错误信息。注意，这里需要将 props.meta 属性作为第二个参数传入。 props.meta 包含了 Field 组件的相关属性，可以在 getFieldError 函数中做相关处理。

示例

接下来，我们结合一个简单示例来进一步理解 redux-form-giautm 的使用方式。

配置表单组件 - LoginForm.js：

------ ----- ---- --------
------ - ----- - ---- -------------
------ ---------- ---- --------------------

----- --------- ------- ------------------- -
    -------- -
        ------ -
            ----- -----------------------------------
                -----
                    ------ -------------------------------
                    ------
                        ---------------
                        -----------------
                        -----------
                        --------------------
                    --
                ------
                -----
                    ------ ------------------------------
                    ------
                        ---------------
                        -----------------
                        ---------------
                        -------------------
                    --
                ------
                ------- ------------- ---------------------------------
                    ---------------------- - -------- - -----
                ---------
            -------
        --
    -
-

----- -------- - ------ -- -
    ----- ------ - ---

    -- ------------------ -
        --------------- - ----------
    -
    -- ------------------ -
        --------------- - ---------
    -

    ------ -------
--

------ ------- ------------
    ----- ------------
    -------------- -- -------- -- -- ----------------------------------------------
        --------- -- -----------
        -------- -------- ------ -- -- -
            -- ---------- -
                ----- - --------- ------ --
            -
        ---
    ---------
--------------

使用 redux-form-giautm 提供的 createForm 函数创建表单组件，并在 validate 函数中进行同步校验，代码比较简单，这里不再赘述。

接下来，我们需要在 Redux 中设置表单的初始化数据和提交操作的逻辑。redux-form-giautm 提供了与 Redux 集成的 submitForm 和 initializeForm 函数，可以快速集成表单与 Redux 之间的关系。

配置 Redux 相关逻辑：

-- ----------------------
------ ----- ----- - ------ -- -------- -- -
    ---------- ----- -------------- ---
    ------------- -- -
        ---------- ----- --------------- ---
    -- ------
--

-- -----------------
------ - --------------- - ---- --------
------ - ------- -- ----------- - ---- -------------
----- ----------- - -----------------
    ----- ------------
    -- -- -------
---
------ ------- ------------

-- ----
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ -------- ---- -------------------
------ --------- ---- -------------------------

----- ----- - --------------------- ------------------------

----------------
    --------- --------------
        ---------- ---------------- -- ------------------------------ --
    ------------
    ------------------------------
--

在相应的 Redux 操作中，通过 submitForm 将表单提交操作绑定到 Redux 中：

-- ----------------------
------ - ---------- - ---- --------------------

------ ----- ----- - ------ -- -------- -- -
    ---------- ----- -------------- ---
    -------------------- ------------
        -------- -- -
            ------------- -- -
                ---------- ----- --------------- ---
            -- ------
        --
        ------------- -- -
            ---------- ----- ------------- ------ ---
        ---
--

在页面的底部可以放置一个简单的表单提交状态提示组件 LoginStatus.js：

------ ----- ---- --------
------ - ------- - ---- --------------

----- --------------- - ----- -- --
    ------------------------
    ----------- -----------------
---

----- ----------- - -- ---------- -- -- -
    ----- - ------------- ------ --------- - - -----------

    -- -------------- -
        ------ ---------------
    - ---- -- ------- -
        ------ ---- -------- ------ ----- ---------------------------
    - ---- -- ----------- -
        ------ ---- -------- ------ ------- ---------------
    - ---- -
        ------ -----
    -
--

------ ------- --------------------------------------

在页面中使用 LoginForm 和 LoginStatus 组件即可完成登录操作和状态展示：

------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ -------- ---- -------------------
------ --------- ---- -------------------------
------ ----------- ---- ---------------------------

----- ----- - --------------------- ------------------------

----------------
    --------- --------------
        ---------- ---------------- -- ------------------------------ --
        ------------ --
    ------------
    ------------------------------
--

以上代码的效果预览：https://codesandbox.io/s/redux-form-giautm-example-dg6qr

结语

本文介绍了如何使用 npm 包 redux-form-giautm 更快速地完成表单相关开发，自带表单异步校验功能，可以让表单的开发更加快捷高效。同时，我们以一个简单的登录表单为例，结合具体的代码演示，深度解读了 reducer、action、组件和第三方库间的协作方式。

希望能对大家有所启发和帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005589d81e8991b448d5e3c

阅读全文

猜你喜欢

  • npm 包 isopropyl-style-loader 使用教程

    在前端开发过程中，我们经常会使用 CSS 预编译器来提高效率和代码可维护性。而在使用预编译器的过程中，我们需要通过工具来将预编译器的 CSS 代码转换成浏览器可识别的 CSS 代码。

    2 年前
  • npm 包 json-to-form-data 使用教程

    前言 前端中常常需要进行数据的格式转换。其中，从 JSON 形式的数据转换为 FormData 数据格式是一种比较常见的需求。而当我们需要将 JSON 数据格式上传到后端时，我们往往需要将其转换为 F...

    2 年前
  • npm 包 swagger-ops 使用教程

    Swagger-ops 是一个非常方便的 npm 包，它可以帮助我们自动生成 API 文档、前端请求代码和测试文件。在前端开发中，使用 Swagger-ops 可以大大节省 API 文档和请求代码的撰...

    2 年前
  • npm 包 memoized-change-handler 使用教程

    前端开发过程中，经常需要使用监听输入框，下拉框等 DOM 元素的变化，并采取相应的操作，比如重新渲染某个组件等。而且在多个地方使用的时候，容易出现代码的冗余，维护起来也很费劲。

    2 年前
  • npm 包 @ull-alejandro-raul-35l2/ull-shape-square 使用教程

    什么是 @ull-alejandro-raul-35l2/ull-shape-square @ull-alejandro-raul-35l2/ull-shape-square 是一款 Node.js ...

    2 年前
  • npm 包 wrangler-object-mapper 使用教程

    介绍 wrangler-object-mapper 是一个用于 JavaScript 中的对象映射库，可通过简单的配置将 JSON 数据映射到 JavaScript 对象中，或将 JavaScript...

    2 年前
  • npm 包 nwsjs 使用教程

    什么是 nwsjs nwsjs 是一个基于 Node.js 和 Chromium 的轻量级 Web 服务器，提供了本地开发和测试的环境。它支持多个 Web 标准特性，如跨域请求、HTTP/HTTPS ...

    2 年前
  • npm 包 hydra-experimental 使用教程

    在前端开发中，我们经常使用各种 npm 包来实现我们的需求。hydra-experimental 是一个能够帮助我们更好地管理前端应用状态的 npm 包。在本文中，我们会详细讲解如何使用 hydra-...

    2 年前
  • npm 包 gulp-annotate 使用教程

    在前端开发过程中，经常会用到 gulp 自动化构建工具。gulp-annotate 是一个非常实用的 npm 包，它能够自动给 JavaScript 代码添加注解信息，以此提高代码可读性和可维护性。

    2 年前
  • npm 包 @berkanrhdz/ull-shape-berkanrhdz 使用教程

    简介 @berkanrhdz/ull-shape-berkanrhdz 是一款基于 JavaScript 的 npm 包。它提供了一些常见的形状计算，如圆形、矩形、正方形等。

    2 年前
  • npm 包 gloup.io 使用教程

    前言 在现代 Web 开发中，前端构建工具往往不仅仅是一个处理静态资源的工具，其功能逐渐扩展到了自动化测试、代码检查、代码打包、代码压缩、部署等方面。而 gloup.io 是一个基于 gulp 的轻量...

    2 年前
  • npm 包 passport-steam-some 使用教程

    前言 Steam 是一款热门的数字游戏平台，在前端项目中经常使用。而 passport-steam-some 是一款可以让你使用 Steam 账号进行登录认证的 npm 包，本文将详细介绍如何使用 p...

    2 年前
  • npm 包 udiui 使用教程

    在前端开发中，我们经常需要用到一些优秀的工具来提高开发效率和代码质量。其中，npm 包是一种非常常见和实用的工具，为我们提供了许多辅助开发的功能。在这篇文章中，我将介绍一个名为 udiui 的 npm...

    2 年前
  • npm 包 @alu0100769579/ull-shape-rectangle-alu0100769579 使用教程

    简介 @alu0100769579/ull-shape-rectangle-alu0100769579 是一个在 Node.js 和浏览器中使用的 npm 包，提供了创建矩形形状的功能。

    2 年前
  • npm 包 inject-main-test 使用教程

    在前端开发中，我们经常需要向 HTML 页面中插入一些 JavaScript 或 CSS 文件。常见的做法是手动添加 script 和 link 标签，但这种方式显然不够优雅和高效。

    2 年前
  • npm 包 basic-http-proxy 使用教程

    简介 basic-http-proxy 是一个基于 Node.js 的 HTTP 代理服务，可以将客户端的 HTTP 请求转发到指定的主机和端口。它支持安全的 HTTPS 连接，可以自定义请求头和响应...

    2 年前
  • npm 包 bingo-kiki-fullpage 使用教程

    在前端开发中，页面滚动效果是一个必不可少的功能，而全屏滚动效果更是非常受欢迎。而实现全屏滚动效果有很多种方式，其中有一种方式就是使用 npm 包 bingo-kiki-fullpage。

    2 年前
  • npm 包 text-net 使用教程

    text-net 是一个基于 Node.js 的 npm 包，它可以让你通过文本交互实现网络通信。这个包的功能不仅仅是简单地发送和接收消息，它可以让你使用文本协议与远程服务器进行交互。

    2 年前
  • npm 包 theta-control 使用教程

    前言 Theta-Control 是一款用于连接 Theta S 和 Theta V 等全景相机的 npm 包。它提供了一系列的 API 和命令，帮助我们在 web 应用中控制全景相机的各种操作。

    2 年前
  • npm 包 @alu0100769579/ull-shape-triangle-alu0100769579 使用教程

    @alu0100769579/ull-shape-triangle-alu0100769579 是一个前端类 npm 包，它可以用来计算三角形的周长和面积。本文将详细介绍如何使用该 npm 包，以及它...

    2 年前

相关推荐

    暂无文章