当我们使用 React 构建表单时，通常会遇到许多复杂的验证和输入限制。而 formik-schema 提供了一种方便的方式来定义表单的 schema 和验证规则，使得我们可以更加轻松地构建表单。
前置知识
在使用 formik-schema 前，需要对以下技术有基本了解：
- React 基础
- React 表单
- Yup（一个用于 JavaScript 对象验证的库）
安装和使用
安装 formik-schema 最简单的方法是通过 npm，在终端中输入以下命令：
npm install --save formik-schema
安装好之后，我们可以通过以下代码来定义一个 schema：
-- -------------------- ---- -------
------ - -- --- ---- ------
------ ----- ------ - --------------------
---------- ------------------------
--------- ------------------------
------ --------------------------------
--------- -------------------------------
---------------- -------------------
--------------------- ------
---------- ---- ------
--
---- ----------------------------------
--------------------------- --------------------------- ---- ---- ------ --- ----- --- -------------
---在代码中定义了一个对象 schema，使用了 Yup 进行了数据验证。接着，可以使用 formik-schema 提供的 HOC（Higher Order Component）来创建一个表单组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ----------------
------ - ------ - ---- -----------
----- ---------- - ----- -- -
------ -
-----
---------------
----- ------------------------------
-----
------------ ------------
------ ----------- ---------------- ----------------------------- ------------------------------ --
------
-----
----------- ------------
------ ----------- --------------- ----------------------------- ----------------------------- --
------
-----
--------------------
------ ------------ ------------ ----------------------------- -------------------------- --
------
-----
-----------------------
------ --------------- --------------- ----------------------------- ----------------------------- --
------
-----
-------------- ----------------
------ --------------- ---------------------- ----------------------------- ------------------------------------ --
------
-----
------------------
------ ------------- ---------- ----------------------------- ------------------------ --
------
-----
------------- ----- --- ------------------
------ --------------- --------------------------------- ----------------------------- ----------------------------------------------- --
------
------- -----------------------------
-------
------
--
-
------ ------- ---------------------- --------通过这个示例代码，我们可以看到 createForm 函数由两个参数组成，分别是 SignupForm 组件和 schema 对象。该函数返回一个新的组件，这个新组件包含了许多表单相关的属性和操作。
验证和提交
在上面的代码中，我们使用了 handleSubmit 来提交表单并且在输入时使用了 values 和 handleChange。这些东西都由 createForm 函数来处理，我们无需担心。
当用户提交表单时，若内容符合 schema 中的验证规则，则 onSubmit 回调函数会被调用以便处理表单的提交。如果不符合规则，则 formik-schema 会自动利用 Yup 来缓存验证错误，接着我们可以在组件中处理这些错误信息。
-- -------------------- ---- -------
----- ---------- - ----- -- -
----- ------------------------------
-----
------------ ------------
------ ----------- ---------------- ----------------------------- ------------------------------ --
------------------------ -- ---------------------- -- ------------------------------------
------
---
-------
--在组件中，可以使用 errors 和 touched 属性来显示对应的错误信息和字段是否被访问过。比如在上面的代码中，我们会在用户访问过 firstName 字段且发生了错误时显示错误信息。
总结
使用 formik-schema，我们可以更加方便地定义表单的 schema 和验证规则，使得构建表单的工作更加高效。同时，此 npm 包也支持自定义验证规则和错误信息，满足更多需求。
希望这篇文章对各位前端开发者学习 formik-schema 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005653981e8991b448e1ab1