在前端开发中，表单是常用的元素之一。但是，表单的处理通常会变得很麻烦和麻烦，尤其是当我们需要处理嵌套对象时。这时，我们会发现使用简单的 HTML 提交表单很难满足我们的需求，因此我们需要一个更方便的解决方案。本教程将介绍一个名为 formik 的 npm 包，它提供了一个更好的方式来解决表单问题。
什么是 formik？
formik 是一个 React 表单库，它提供了一种简单且可重复使用的方式来处理表单。它不依赖于大型状态库，如 Redux，也不需要大量的代码来处理表单。formik 处理营的状态管理，并为开发者提供了一堆常用的处理表单的 API，还有很多其他功能。
安装 formik
如果您使用的是 npm，可以使用以下命令来安装 formik：
npm install formik --save
使用 formik
在开始使用 formik 之前，您需要导入库并创建一个包含表单方法的高阶组件（HOC），或者您可以使用 formik 提供的默认导出表单。
在这里，我们将使用第二种方法，首先，我们需要在文件顶部导入 formik：
import { Formik } from '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