npm 包 formik 使用教程

在前端开发中，表单是常用的元素之一。但是，表单的处理通常会变得很麻烦和麻烦，尤其是当我们需要处理嵌套对象时。这时，我们会发现使用简单的 HTML 提交表单很难满足我们的需求，因此我们需要一个更方便的解决方案。本教程将介绍一个名为 formik 的 npm 包，它提供了一个更好的方式来解决表单问题。

什么是 formik？

formik 是一个 React 表单库，它提供了一种简单且可重复使用的方式来处理表单。它不依赖于大型状态库，如 Redux，也不需要大量的代码来处理表单。formik 处理营的状态管理，并为开发者提供了一堆常用的处理表单的 API，还有很多其他功能。

安装 formik

如果您使用的是 npm，可以使用以下命令来安装 formik：

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

使用 formik

在开始使用 formik 之前，您需要导入库并创建一个包含表单方法的高阶组件（HOC），或者您可以使用 formik 提供的默认导出表单。

在这里，我们将使用第二种方法，首先，我们需要在文件顶部导入 formik：

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

接下来，我们将创建一个简单的登录表单，并将其封装在 Formik 组件中。以下是一个示例代码：

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


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

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

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

在此示例中，我们使用 Formik 组件来封装整个表单，并向其提供了以下参数：

  • initialValues: 表单的默认值。
  • validate: 表单的验证规则。
  • onSubmit: 在表单提交时要执行的操作。

最终，我们在表单内使用一个回调函数来访问表单的各种状态，例如：values，errors，touched，handleChange，handleBlur，handleSubmit，isSubmitting 等等。

表单验证

对于任何表单，验证都是最重要的任务之一。使用 formik，您可以轻松地定义表单验证规则。例如，下面的代码片段演示了如何使用 formik 来定义一个简单的表单验证：

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

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

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

在这个示例中，我们使用了 validate 属性来定义验证规则。如果存在错误，则会将其添加到错误对象中并在表单中显示。

提交表单

在 formik 中，您可以通过设置 onSubmit 属性来定义表单提交时的操作。例如，以下代码段演示如何使用 formik 来提交表单：

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

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

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

在这个示例中，我们设置了 onSubmit 属性，它将在表单提交时触发。回调函数将请求 payload 转换为 JSON，然后将其提供给 alert 方法来显示在屏幕上。

总结

formik 是一个方便易用的 React 表单库，提供了一种解决表单问题的方法。使用 formik，我们可以用更少的代码来处理表单，并且可以很容易地维护和扩展表单。如果您对 formik 有任何问题或需要更多信息，请访问官方网站：https://formik.org/docs/overview

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

阅读全文

猜你喜欢

  • npm 包 Alsatian 使用教程

    Alsatian 是一个专为 TypeScript 设计的测试框架，提供了一系列的 API 和功能，帮助开发者进行单元测试、集成测试、覆盖率测试等工作。作为最佳实践，适当的测试可以保证代码质量，提升开...

    5 年前
  • npm 包 @types/slug 使用教程

    前言 在进行前端开发的过程中，我们经常需要处理字符串。其中一项常见的操作就是将字符串转换成 slug，即将一句话或标题中的每个单词以连字符连接起来，从而形成一个唯一的 URL。

    5 年前
  • npm 包 @types/react-router-redux 使用教程

    前言 React-Router-Redux 是一个用于 React 应用程序的路由器和状态容器的集成库，可以方便地将 Redux 应用状态同步到 URL 中，这使得在浏览器的 URL 地址中导航和刷新...

    5 年前
  • npm 包 @types/react-router-config 使用教程

    介绍 @types/react-router-config 是一个 TypeScript 类型定义库，它为 react-router-config 与 TypeScript 集成提供了帮助。

    5 年前
  • npm 包 @types/koa-route 使用教程

    背景 Koa 是一个优秀的 Node.js Web 框架，它的核心理念是中间件，开发者可以通过中间件来处理各种请求及响应。而 koa-route 是官方推荐的路由处理中间件，它支持多种 HTTP 请求...

    5 年前
  • npm 包 @types/swagger-ui-express 使用教程

    在开发前端应用时，我们常常需要使用一些第三方的库和框架来方便我们的开发。其中，Swagger 是一款用于 API 文档和测试的开源工具，而 @types/swagger-ui-express 则是一款...

    5 年前
  • npm 包 @ashuey/ludicolo-container 使用教程

    简介 @ashuey/ludicolo-container 是一个基于 React 的 UI 库，提供了一个简洁易用的容器组件。它可以帮助开发者快速构建前端界面，提高 UI 开发效率。

    5 年前
  • npm 包 @types/webpack-dev-server 使用教程

    前言 Webpack Dev Server 是 webpack 官方提供的一个开发服务器。它支持自动刷新，代理请求和热更新等功能，是前端开发中常用的工具之一。而 @types/webpack-dev-...

    5 年前
  • npm 包 @angular/platform-server 使用教程

    前言 @angular/platform-server 是 Angular 框架所提供的一个功能强大的 npm 包。该包可以将 Angular 应用程序渲染成 HTML，以便能够在服务器端渲染网页。

    5 年前
  • npm 包 angular-prism 使用教程

    在当今互联网时代，前端技术正在变得越来越重要。前端开发中的许多问题都可以通过使用各种 npm 包来解决。angular-prism 是一个非常受欢迎的 npm 包，它提供了一种简单而强大的方法来添加代...

    5 年前
  • npm 包 `package-dependency-graph` 使用教程

    在前端开发中，我们经常需要管理依赖关系。使用 npm 包管理器可以方便地处理依赖关系并保持软件包的更新。但是，在处理复杂的依赖关系时，我们需要一种更高级的工具来可视化这些关系。

    5 年前
  • npm 包 @arbel/firesql 使用教程

    前言 Firebase 是一个非常流行的移动和 Web 应用程序开发平台。在构建 Firebase 应用程序时，常常需要对数据进行 CRUD 操作。而在实现这些操作时，Firebase 提供了很好的 ...

    5 年前
  • NPM包RXFire使用教程

    介绍 RXFire 是一个用于 Firebase 的 RxJS 6库。该库提供了许多用于管理 Firestore 和 Firebase 的实时数据库的 API。 它允许您使用 RxJS 中的强大工具来...

    5 年前
  • npm 包 @arbel/node-xhr2 使用教程

    介绍 在前端开发中，我们经常需要与后端进行数据交互，此时我们通常会使用 XMLHttpRequest（XHR）对象来实现。但是，XHR 对象的 API 设计并不是很友好，操作繁琐，不够简洁。

    5 年前
  • npm包@agilearchitects/env使用教程

    简介 npm包@agilearchitects/env是一个轻量级的Node.js环境配置管理工具。它允许您轻松管理您的环境变量并提高您的应用程序的可靠性和安全性。

    5 年前
  • npm 包 @concorde2k/core.vault 使用教程

    @concorde2k/core.vault 是一个用于管理加密信息的 npm 包。它可以帮助开发人员安全地存储和访问敏感信息，如密码、API 密钥、授权令牌等。本文将介绍如何在前端应用程序中使用 @...

    5 年前
  • npm包@concorde2k/core.mongo使用教程

    前言 NPM 是一个全球最大的开源软件包管理系统，是常用的包管理工具之一，而@concorde2k/core.mongo则是一个针对MongoDB数据库的一个工具包，它大大简化了MongoDB数据库的...

    5 年前
  • npm 包 class-transformer-validator 使用教程

    什么是 class-transformer-validator class-transformer-validator 是一个基于 TypeScript 且使用装饰器语法的 npm 包，它可以通过装饰...

    5 年前
  • npm 包 @types/underscore.string 使用教程

    在前端开发中，我们会频繁使用字符串操作。而 underscore.string 是一个非常好用的字符串扩展库，其提供了许多方便的字符串操作方法。如果你在使用 TypeScript 开发项目中，那么你一...

    5 年前
  • npm 包 @types/number-to-words 使用教程

    在前端开发中，可能经常需要将数字转换为英文单词，这时候 @types/number-to-words 就是一个非常实用的 npm 包。它提供了一个简单易用的方法来将数字转换成英文单词。

    5 年前

相关推荐

    暂无文章