在前端开发中，表单是非常重要的一部分。要管理表单的状态、逻辑和验证是一个相对繁琐的工作。然而，使用 @morgs32/formik 这个 npm 包，开发人员可以更轻松地处理表单，从而提高开发效率和产品质量。
安装和配置 Formik
首先，你需要安装 Formik：
npm i @morgs32/formik
在你的文件中，引入 Formik ：
import { Formik } from '@morgs32/formik';使用 Formik 时，最好包含以下的表单组件：
import { Form, Field, ErrorMessage } from '@morgs32/formik';实现一个表单
现在，我们可以开始编写一个表单了。在这个例子中，我们将创建一个简单的登录表单，并验证其输入。
首先，创建一个 initial values 对象来定义表单的初始值：
const initialValues = {
email: '',
password: '',
};然后，在 render 方法中，使用 Formik 组件来实现表单的基本结构：
-- -------------------- ---- -------
-------
-----------------------------
----------------------
-
--- ------------ -- -- -
------
------ --------------------- ----------------
------ ------------ ------------ --
------ ------------------------------------
------ --------------- --------------- --
------- ------------- ------------------------
-----
---------
-------
--
---------注意到 onSubmit 属性引用了一个名为 handleLogin 的函数，我们在下面会定义它。
验证表单
接下来，我们需要验证表单。Formik 提供了内置的表单验证功能。我们可以通过添加一个名为 validate 的函数来实现它。validate 函数将接收整个表单值，然后返回一个对象，其中包含每个字段的验证错误消息，具体如下：
-- -------------------- ---- -------
----- -------- - ------ -- -
----- ------ - ---
-- --------------- -
------------ - ------ ----------
- ---- -- -
-------------------------------------------------------------------
------------
-
- -
------------ - -------- ----- ---------
-
-- ------------------ -
--------------- - --------- ----------
- ---- -- ----------------------- - -- -
--------------- - --------- ---- -- -- ----- - ------------
-
------ -------
--在这个例子中，我们验证了 email 和 password 字段。如果验证失败，我们将错误消息存储在 errors 对象中，以便后续使用。
最后，将 validate 函数与 Formik 组件结合使用：
<Formik
initialValues={initialValues}
onSubmit={handleLogin}
validate={validate}
>处理表单提交
最后一步是处理表单的提交。可以通过将一个函数传递给 onSubmit 属性来实现它，如下所示：
const handleLogin = (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 2000);
};在这个例子中，我们使用一个 setTimeout 模拟了数据提交和响应过程。你可以在你的实际代码中将其替换为实际的数据逻辑。
setSubmitting 是一个回调函数，用于更改表单的 isSubmitting 状态。在将表单数据提交到服务器时，需要用到这个函数。
通过这个例子，你应该已经了解了如何使用 Formik 来实现一个简单的登录表单，校验输入值，以及处理表单的提交。
总结
Formik 是一个十分实用的 npm 包，可以大幅提升表单处理的效率和质量。使用 Formik 可以轻松处理表单的实现、校验和提交等环节。希望这篇文章能够有助于学习和使用 Formik。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005763781e8991b448ea93c