简介
kief 是一个专门用于在 React 应用中使用 Formik 的工具。如果您想要简化 React 应用中 Formik 的使用，那么 kief 就是您需要的工具。
安装 kief
使用 kief 首先需要安装该 npm 包。您可以通过以下命令在终端中安装 kief。
npm install kief
如果您使用的是 yarn，可以使用以下命令进行安装：
yarn add kief
使用 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