npm 包 formik-material-ui 使用教程

formik-material-ui 是一个用于 React 的轻量级表单库。它提供了一组预先创建好的可重复使用的 React 组件，用于表单的 UI 设计，包括文本框、下拉框、复选框、单选框等等。此外，它还与 Formik 表单库集成，使表单数据的管理变得更加简单。本文将介绍如何使用 formik-material-ui 创建 React 表单，并提供详细的步骤与示例代码。

前置条件

在继续阅读下文之前，请确保你已经满足以下条件：

  • 已安装 Node.js
  • 已安装并设置好 npm

安装

在 React 项目的根目录下，使用 npm 命令安装 formik-material-ui 包：

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

formik 和 @material-ui/core 是 formik-material-ui 的依赖项，因此它们也需要安装。

基本用法

在这里我们将创建一个简单的表单，然后将其集成到 React 应用程序中。以下代码将帮助我们创建具有姓名、电子邮件、密码和确认密码字段的包括表单验证的表单：

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们创建了一个包含 4 个字段的表单，并使用 Field 组件创建了每个字段的文本框。每个 Field 组件都附有一个 component 属性，该属性指定在表单中使用的实际组件，使用 TextField 组件作为实例组件，使每个字段的 UI 表现形式更加漂亮。 此外，我们还提供了一个 onSubmit 回调函数，该函数接收表单数据并将其输出到控制台中。注意，我们使用按钮的 onClick 事件激活 submitForm 回调函数，而不是传统的表单提交。

高级用法

formik-material-ui 还支持更多的高级用法和组件。在这里，我们将创建一个具有下拉菜单字段和复选框字段的表单。我们还将使用 withStyles 函数自定义 CSS，以更改复选框和下拉菜单的样式。

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

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

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们添加 occupation、newsletter 和 termsAndConditions 字段。我们还使用 withStyles 函数定制了 CSS 样式，以更改复选框和下拉菜单的表现形式。

结论

formik-material-ui 为 React 表单实现提供了一个快速且简单的方法。它的简单易用性，高度的可定制性和与 Formik 表单库的集成使其成为开发人员的首选工具。我们在本文中介绍了基本和高级用法，希望它可以帮助您更好地了解如何使用 formik-material-ui。

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

阅读全文

猜你喜欢

  • 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 年前

相关推荐

    暂无文章