formik-material-ui 是一个用于 React 的轻量级表单库。它提供了一组预先创建好的可重复使用的 React 组件，用于表单的 UI 设计，包括文本框、下拉框、复选框、单选框等等。此外，它还与 Formik 表单库集成，使表单数据的管理变得更加简单。本文将介绍如何使用 formik-material-ui 创建 React 表单，并提供详细的步骤与示例代码。
前置条件
在继续阅读下文之前，请确保你已经满足以下条件：
- 已安装 Node.js
- 已安装并设置好 npm
安装
在 React 项目的根目录下，使用 npm 命令安装 formik-material-ui 包：
npm install formik @material-ui/core formik-material-ui --save
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