简介
kief 是一个专门用于在 React 应用中使用 Formik 的工具。如果您想要简化 React 应用中 Formik 的使用，那么 kief 就是您需要的工具。
安装 kief
使用 kief 首先需要安装该 npm 包。您可以通过以下命令在终端中安装 kief。
--- ------- ----
如果您使用的是 yarn，可以使用以下命令进行安装：
---- --- ----
使用 kief
初始化 Formik 表单
在使用 kief 之前，您需要先初始化 Formik 表单。如果您还没有熟悉如何使用 Formik，可以先查看 Formik 官方文档。
------ - --------- - ---- ---------
----- ------------- - -
----- ---
------ ---
--
----- -------- - -------- -- -
----- ------ - ---
-- -------------- ----------- - -----------
-- --------------- ------------ - -----------
------ -------
--
----- ------ - -- -- -
----- ------ - -----------
--------------
---------
--------- -------- -- -
--------------------
--
---
------ -
----- -------------------------------
------ ---------------------------
------
---------
-----------
-----------
------------------------------
--------------------------
--------------------------
--
-------------------- -- ------------------ - -
-------------------------------
- - -----
------ --------------------- ---------------
------
----------
------------
------------
------------------------------
--------------------------
---------------------------
--
--------------------- -- ------------------- - -
--------------------------------
- - -----
------- -----------------------------
-------
--
--使用 kief 封装 Formik 表单
使用 kief 封装 Formik 表单，代码会变得更加简洁易懂，并且可以提高代码的复用性。
------ - ------- - ---- -------
----- ------------- - -
----- ---
------ ---
--
----- -------- - -------- -- -
----- ------ - ---
-- -------------- ----------- - -----------
-- --------------- ------------ - -----------
------ -------
--
----- ------ - -- -- -
----- - ------- ------ ------ ------------ - - ---------
--------------
---------
--------- -------- -- -
--------------------
--
---
------ -
----- -------------------------------
------ ---------------------------
------ ------------------ --
---------------
------ --------------------- ---------------
------ ------------------- --
----------------
--------------
-------
--
--kief 的数据接口
当使用了 useKief 后，我们可以通过以下方式获取表单的 props。
formik：Formik 状态管理对象，使用方式和原生的 Formik 相同。input(name: string, props?: any)：用于生成表单元素的 props。函数接受一个表单元素的名字作为参数，返回该表单元素的 props 对象。您可以将返回结果直接传递给<input>作为该元素的属性。error(name: string)：展示该表单元素的错误信息。该函数接受表单元素的名字作为参数。submitButton：提交表单用的按钮。
示例代码
以下是一个完整的使用 kief 封装前的表单示例。
------ - --------- - ---- ---------
------ - ------- - ---- -------
----- ------------- - -
----- ---
------ ---
--------- ---
--
----- -------- - -------- -- -
----- ------ - ---
-- -------------- ----------- - -----------
-- --------------- ------------ - -----------
-- ------------------ --------------- - -----------
------ -------
--
----- ------ - -- -- -
----- ------ - -----------
--------------
---------
--------- -------- -- -
--------------------
--
---
----- - ------ ------ ------------ - - ----------------
------ -
----- -------------------------------
------ ---------------------------
------ ------------------ --
---------------
------ --------------------- ---------------
------ ------------------- --
----------------
------ -----------------------------------
------ ---------------------- --
-------------------
--------------
-------
--
--如果您想要使用 kief 封装的代码，您需要将 const { input, error, submitButton } = useKief(formik); 中的 formik 对象替换为自己创建的 Formik 状态管理对象。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067357890c4f7277583d3d