npm 包 kief 使用教程

阅读时长 7 分钟读完

简介

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

纠错
反馈