npm 包 @schleumer/redux-form 使用教程

简介

@schleumer/redux-form 是一个方便的 Redux 表单管理应用。它是基于 Redux 和 React 的组件编写而成，旨在提供一种更加简单和直观的方式来管理表单数据。本篇文章将介绍使用该包来创建、验证和提交表单数据，以及如何处理数据集。

安装

在使用 @schleumer/redux-form 之前，需要确保已经安装了以下软件包：

  • React
  • Redux
  • react-redux

可以使用 npm 包来安装这些软件包:

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

这将会下载并安装所有依赖包。

创建表单

在创建表单之前，需要确定表单所需要的输入的类型和名称。在 React 中，表单通常通过使用 input, select 和 textarea 元素来创建，可以使用@schleumer/redux-form 的 Field 组件来实现。该组件自动设置与 Redux 表单状态之间的联系并为你完成验证和错误信息的显示。

下面是一个基本的表单示例：

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

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

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

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

注意，该组件被包含在reduxForm函数的封装器中，这个函数提供了一些默认的功能，例如连接状态和派发 Redux Action 等。

验证表单数据

@schleumer/redux-form 提供了多种验证表单数据的方法，如必填字段、比较数据、长度与模式等。通过 reduxForm() 高阶函数中传入的 validate 属性即可设置表单验证规则。

下面是一个使用表单验证的示例：

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

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

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

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

在上面的示例中，我们增加了一个名为 validate 的验证器函数，并在 reduxForm() 函数中注册，这将自动验证表单中的 firstName 和 lastName 字段是否为空。验证器函数将返回一个对象，用于指定哪些字段出现错误，并存储这些错误信息。例如：

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

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

处理表单数据

表单数据在提交时，将会传递给提交函数。使用 Redux 来处理这些数据尤其重要，因为在视图和数据之间建立了固定的联系，且状态的更改只能通过派发 Action 来实现。

在 @schleumer/redux-form 中，可以通过 onSubmit 属性设置提交表单后的回调函数，该函数将在表单数据验证通过后被调用。例如：

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

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

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

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

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

在上面的示例中，我们设置了 this.submit 作为表单提交回调函数，当表单通过验证时，该函数将被自动触发，并接收表单数据作为其唯一参数。在这里，我们使用了 console.log() 来打印表单数据到控制台中。

示例代码

下面是一个完整的示例代码块：

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

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

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

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

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

结论

在本文中，我们介绍了如何使用@schleumer/redux-form 创建、验证和提交表单数据。此外，我们还讨论了使用高阶函数来注册表单组件、在 validate 函数中指定表单验证规则以及在提交回调中处理表单数据。

希望这篇文章能够对您的 React 前端开发工作提供帮助。

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

阅读全文

猜你喜欢

  • npm 包 amqplib-retryable 使用教程

    简介 amqplib-retryable 是一个基于 amqplib 封装的 npm 包，主要用于 RabbitMQ 消息队列的接入。该包可以实现自动重试机制的消息发送，保证消息的可靠性。

    3 年前
  • npm 包 builder-pattern-es6 使用教程

    什么是 builder-pattern-es6 builder-pattern-es6 是一个 npm 包，它提供了一种 builder pattern（构建器模式）的实现方式，使得创建对象的流程更加...

    3 年前
  • NPM包vue2-social-icons使用教程

    简介 vue2-social-icons是一个Vue.js组件，用于在Web应用程序中渲染常用的社交媒体图标。该组件包括了40个不同的社交媒体图标，使您可以快速轻松地将它们添加到您的应用程序中。

    3 年前
  • npm 包 fk-reactnative-shimmer 使用教程

    随着移动端应用的普及，越来越多的开发者开始关注 React Native。React Native 是 Facebook 推出的开源框架，它能够让开发者使用 JavaScript 和 React 语言...

    3 年前
  • npm 包 gatsby-bulma-default 使用教程

    在前端开发过程中，样式往往是一个大问题。为了解决这个问题，我们使用了各种 CSS 框架，其中 Bulma 是最流行的之一。在 Gatsby 中使用 Bulma，可以使开发变得更简单、更轻松。

    3 年前
  • npm 包 graphql-osm 使用教程

    GraphQL-OSM 是一个利用 GraphQL 技术实现的 OpenStreetMap 数据库查询工具。它提供了一些方便的 GraphQL 接口，可以帮助我们快速地查询 OSM 数据库中的信息。

    3 年前
  • npm 包 json-vuex 使用教程

    在前端开发中，我们经常要处理各种复杂的数据，为了方便管理和维护，经常使用状态管理工具。Vuex 是一个非常流行的状态管理工具，但是它的状态只能是 JavaScript 对象。

    3 年前
  • npm 包 @huston007/react-native-eventsource 使用教程

    在前端开发中，我们经常会用到事件源（EventSource）来实现服务器端推送消息的功能。@huston007/react-native-eventsource 是一个基于 React Native ...

    3 年前
  • npm包adadgio-ng-utils使用教程

    adadgio-ng-utils是一款基于Angular框架的npm包，它包含了一系列的Angular工具函数、过滤器、指令和服务，旨在帮助前端开发者快速构建应用程序。

    3 年前
  • NPM包changzhn-jsonp使用教程

    简介 changzhn-jsonp是一款可以在前端使用的JSONP库，支持跨域请求，解决了浏览器限制AJAX请求的问题。 安装 你可以在项目中使用npm安装changzhn-jsonp。

    3 年前
  • npm 包 az-modal 使用教程

    随着前端技术的发展，我们可以很方便地使用许多便捷的库和工具来构建我们的网站应用程序。npm 就是其中之一。npm 是 Node.js 包管理工具，提供了很多开发者可以方便地使用的包。

    3 年前
  • npm 包 npm-chip-avatar 使用教程

    npm-chip-avatar 是一款基于 React 的小工具，用于生成小型图像卡片。它的设计灵感来自于今时今日的繁忙生活，在网络中我们时常需要处理大量精力，并往往通过快速浏览网页获取关键信息。

    3 年前
  • npm 包 trekels-notie 使用教程

    简介 trekels-notie 是一个基于 JavaScript 的简易通知提示插件，功能类似于浏览器自带的 alert 和 prompt，但是它可以自定义样式，支持多种事件绑定和动画效果，而且不会...

    3 年前
  • npm 包 drf-redux-auth 使用教程

    前言 前端开发人员通常使用 REST API 与服务器进行交互，而许多 Web 应用程序都依赖于身份验证和授权来提供安全性和权限控制。在 Django 框架中，我们可以使用 Django-rest-f...

    3 年前
  • npm 包 json-messages 使用教程

    前言 在前端开发中，接收和发送数据是必须的操作。而 JSON 格式作为轻量级的数据交换格式，被广泛应用。然而，由于 JSON 消息的组合和处理方式多种多样，对于开发人员来说，往往需要一个好用的工具库以...

    3 年前
  • npm 包 json-size-explorer 使用教程

    前言 在前端开发中，我们经常需要处理 JSON 数据，有时候需要知道 JSON 数据的大小，以便优化我们的应用程序。为了方便地查看 JSON 数据的大小，我们可以使用 npm 包 json-size-...

    3 年前
  • npm 包 jwt-express-roles 使用教程

    在前端开发中，经常需要实现用户权限控制的功能，这时候就可以使用 JSON Web Tokens (JWTs) 来进行认证和授权。而 npm 上有个很好用的包 -- jwt-express-roles ...

    3 年前
  • npm 包 react-native-chainz 使用教程

    React Native 是一种开源的JavaScript 库，用于构建用户界面。它由 Facebook 所维护，并且允许开发者使用 JavaScript 构建动态 UI。

    3 年前
  • npm 包 us-csgame-common 使用教程

    简介 us-csgame-common 是一个前端开发包，它包含一些常用的工具函数和组件。使用这个包可以减少重复劳动，提升开发效率。 在这篇文章中，我们将详细介绍如何使用 us-csgame-comm...

    3 年前
  • npm 包 fp-recursion 使用教程

    简介 在函数式编程中，递归经常被用来处理非常常见的问题，例如树形结构的遍历和处理。但是，使用 JavaScript 内置的递归函数通常会导致栈溢出错误。因此，需要一种方法来避免这个问题。

    3 年前

相关推荐

    暂无文章