1. 前言
在前端开发中，表单的验证和日期选择器是比较常用的组件。在 React 中，有一些 UI 组件库及其组件可以使用，比如 Material-UI，但是它们并不支持表单验证和日期选择器。在这种情况下，我们可以使用 formik 和 material-ui-pickers 这两个工具来实现。
formik 是一个 React 表单状态管理库，它可以处理复杂的表单验证，并提供了表单拉取成本和错误处理数据的机制。而 material-ui-pickers 是一个 Material-UI 主题日期选择器，提供了多种日期选择器的形式，包括时间选择器，日期选择器，日期时间选择器等等。
在这篇文章中，我们将介绍如何使用 formik-material-ui-pickers 包，该包整合了 formik 和 material-ui-pickers，方便我们在 React 中创建带有表单验证和日期选择器的表单。
2. 安装和使用
使用 formik-material-ui-pickers 前，需要先安装 formik 和 material-ui-pickers：
npm install formik @material-ui/pickers
接下来，我们可以安装 formik-material-ui-pickers：
npm install formik-material-ui-pickers
在安装完成后，我们可以使用 formik-material-ui-pickers 来创建带有表单验证和日期选择器的表单。
3. 表单验证
使用 formik 可以轻松处理表单验证。我们可以使用 formik-material-ui-pickers 提供的 Field 组件来集成 formik。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ----- - ---- ---------
------ - -- --- ---- ------
------ - ------------------ - ---- -----------------------
------ - ----------------------- - ---- -----------------------
------ ------------ ---- --------------------
------ - --------- - ---- --------------------
------ - ------ - ---- --------------------
------ - ---------- - ---- ---------------------------
------ - ---------- - ---- -----------------------
------ - -------------- - ---- -----------------------
------ - --------------- - ---- -----------------------
------ - --------------- - ---- -----------------------
------ - ------------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------
----- --------- - ------------------ -- --
----- -
-------- -------
-------------- ---------
----------- ---------
--------------- ---------
-- - --- -
------- -----------------
------ -------
--
--
----
----- ---------------- - ------------
---------- ----------------------------------
--------- ----------------------------------
------------ ----------
-------- ------- ---- ------ -- ---- -- --- ---------
----------------------
---
----- ------------- - -
---------- ---
--------- ---
------------ -----
--
-------- ------------------------- -
----- ------- - ------------
------ -
------- ----------------------------- ------------------------------------
--------- -- -
----- -------------------------
------ -----------------
--- ------ ----- ---- -- -- -
---------- -------------- ------------ ----- ---------- --
--
--------
------ ----------------
--- ------ ----- ---- -- -- -
---------- ------------- ----------- ----- ---------- --
--
--------
------ -------------------
--- ------ ----- ---- -- -- -
------------------------ ---------------------
-------------------
----------------
----------- -- ------
-------------------
----------------- --
------------------------------ ------ -----
-
----------------------
------------- ------- ------
--
--
--------------------------
--
--------
-------
-------------
----------- -- -
--------------------
--
-
------
---------
-------
--
---------
--
-
------ ------- ------------------------在此示例中，我们使用 Field 组件来包裹输入组件，并使用 Yup 来定义表单验证规则。initialValues 用于定义表单初始值。
4. 日期选择器
在使用 formik-material-ui-pickers 中，我们可以使用 material-ui-pickers 中提供的日期选择器。这些选择器包括 KeyboardDatePicker，TimePicker，DateTimePicker，DateRangePicker，TimeRangePicker，DateTimeRangePicker，StaticDatePicker 等等。
示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------ ---- --------------------
------ - ----------------------- - ---- -----------------------
------ - ------------------ - ---- -----------------------
-------- ------------ -
----- -------------- ---------------- - ------------ --------
----- ---------------- - ------ -- -
----------------------
--
------ -
------------------------ ---------------------
-------------------
--------------
----------------
-------------------
---------------
-----------------------
----------- ------ -------
--------------------
---------------------------
----------------------
------------- ------- ------
--
--
--------------------------
--
-
------ ------- -----------在上面的示例中，我们使用 KeyboardDatePicker 组件来创建带有时间选择器的日期选择器，变量 selectedDate 来保存选定的日期，然后使用 handleDateChange 方法来处理选定的日期。
5. 结语
在这篇文章中，我们介绍了如何在 React 中使用 formik-material-ui-pickers 模块来创建带有表单验证和日期选择器的表单。我们学习了如何使用 Field 组件和 Yup 来定义表单验证规则，以及如何使用多种 material-ui-pickers 日期选择器组件。我们希望本文对您有所帮助，让您能够更好地开发出适用于前端的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb284b5cbfe1ea0611178