在前端开发中，表单是我们经常会遇到的问题。为了避免重复的劳动和提高效率，我们常常会选择使用一些现成的解决方案来处理表单的验证和提交。在这方面，本文要介绍的 scrnhq-formik 是一个非常实用的 npm 包。
什么是 scrnhq-formik
scrnhq-formik 是一个基于 React 的表单处理库。它提供了一种简洁且易于使用的方式来处理表单的验证、错误反馈和提交操作。相比较传统的表单处理方案，scrnhq-formik 的代码更为简洁，并且提供了更加友好的 API 和可定制性。
如何使用 scrnhq-formik
使用 scrnhq-formik 先要安装它。你可以使用以下命令进行安装：
npm install scrnhq-formik
安装完成后，在你需要处理表单的组件中引入 scrnhq-formik：
import { Formik } from 'scrnhq-formik';基本使用方式
我们来看一个基本的例子：
-- -------------------- ---- -------
-------
---------------- --------- --- --------- -- --
------------------ -- ---------------------
-
--- ------------- ------------- ------ -- -- -
----- ------------------------
------ ----------- --------------- ----------------------- ----------------------- --
------ --------------- --------------- ----------------------- ----------------------- --
------- -----------------------------
-------
--
---------在这个例子中，我们定义了一个表单，它包含了两个输入框和一个提交按钮。我们通过 initialValues 参数设置了表单中的初始值，通过 onSubmit 参数设置了表单提交时的回调函数。在 Formik 中，我们需要将渲染表单的函数嵌套在组件中，并将需要的参数传递给这个渲染函数。在这个例子中，我们传递了 handleChange 和 handleSubmit 函数和当前表单值 values。
表单验证和错误
除了初始值和提交回调函数，Formik 还提供了一个 validationSchema 参数来设置表单的验证规则。它可以帮助我们规范输入内容的有效性，并显示错误消息。
-- -------------------- ---- -------
------ - -- --- ---- ------
----- ------ - --------------------
--------- ------------------------
--------- -------------------------------
---
-------
---------------- --------- --- --------- -- --
-------------------------
------------------ -- ---------------------
-
--- ------- -------- ------------- ------------- ------ -- -- -
----- ------------------------
------
-----------
---------------
-----------------------
-----------------------
--------------------------- -- --------------- - ----------- - ---
--
----------------- -- --------------- - ---- ----------------------------------------- - -----
------
---------------
---------------
-----------------------
-----------------------
--------------------------- -- --------------- - ----------- - ---
--
----------------- -- --------------- - ---- ----------------------------------------- - -----
------- -----------------------------
-------
--
---------在这个例子中，我们使用了 yup 库来定义了一个关于 username 和 password 两个输入框的验证规则，根据这个规则，username 必须输入，而 password 的长度必须大于 8。然后我们将这个规则传递给了 validationSchema 参数，在我们提交表单时这个规则就会被调用。
在表单的渲染处理中，我们使用 has-error 类来表示输入框有错误，并根据 errors 和 touched 属性来判断错误是否存在，并在有错误的输入框下方显示对应的错误信息。
验证错误
在表单验证存在错误的情况下，我们通常需要根据界面给出适当的错误提示。scrnhq-formik 提供了一个错误提示组件 ErrorMessage，可以帮我们快速的显示错误信息。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
-------
---------------- --------- --- --------- -- --
-------------------------
------------------ -- ---------------------
-
--- ------- -------- ------------- ------------- ------ -- -- -
----- ------------------------
------ ----------- --------------- ----------------------- ----------------------- --
------------- --------------- --
------ --------------- --------------- ----------------------- ----------------------- --
------------- --------------- --
------- -----------------------------
-------
--
---------在这个例子中，我们调用了 scrnhq-formik 提供的 ErrorMessage 组件，并传递了对应 Input 的 name。这个组件会根据 name 和当前 Formik 实例的错误信息自动显示错误信息。
更高级的使用
scrnhq-formik 支持我们自定义表单控制器和提交时的数据处理。我们可以通过自定义表单控制器来处理各种复杂的表单控件，而通过自定义 onSubmit 回调函数来处理数据的提交。
-- -------------------- ---- -------
-------
---------------- ----- --- ---- -- --
------------------ - ------------- -- -- -
-------------------------- --------------- -- -
---------------
---------------------
---
--
-
--- ------------- ------------- ------------- ------ -- -- -
----- ------------------------
------ ----------- ------------------- ----------------------- --
------ ---------- ------------------ ----------------------- --
------- ------------- -----------------------------------
-------
--
---------在这个例子中，我们使用 axios 库来处理表单数据的提交，并设置了一个提交成功的提示框，并调用 setSubmitting 函数通知 Formik 组件数据提交已完成。
总结
scrnhq-formik 是一个非常好用的表单处理库，它简化了表单的处理和验证，提供了友好的 API 和丰富的可定制性。我们在实际的开发过程中，可以根据自己的需要进行配置和使用。希望本文对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738581e8991b448e979a