npm 包 final-form-arrays 使用教程

阅读时长 8 分钟读完

简介

Final-form-arrays(以下简称 FFA)是一个npm包,它提供了一个轻量级的、易于使用的表单解决方案,旨在帮助开发者快速地建立前端表单。FFA也提供了一系列扩展功能,如数组表单、提交、异步验证和字段级别访问控制等。

安装和使用

FFA可以通过npm来安装:

安装后,可以通过 importrequire 方式来引用。

一个简单的例子

下面展示了一个基于FFA的简单表单的实现。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - ---------- - ---- --------------------

----- ----------- - -------- -- -
  ----- ------ - ---
  -- -------------- -
    ----------- - -----------
  -
  ------ -------
--

----- -------- - -------- -- -
  --------------------
--

----- --- - -- -- -
  -----
    ----- ------------------- -----------------------
      --- ------------- ---------- -- -- -
        ----- ------------------------
          ----------- ---------------
            --- ------ -- -- -
              -----
                ------------------ ------ -- -
                  ---- -------------------------
                    --------------- -------- - ------------
                    -----
                      ------ ----------- ------------------ --------------------- --
                    ------
                  ------
                ---
                ------- ------------- ----------- -- ------------- ----- -- ----
                  --- ------
                ---------
              ------
            --
          -------------
          ------- ------------- ----------------------
            ------
          ---------
        -------
      --
    -------
  ------
--

------ ------- ----

这个例子创建了一个带有名为 members 的字段数组的表单,数组中的每个元素都包含 name 字段。在表单提交时,数组的值将作为整个表单的一部分进行操作。

API 参考

FieldArray

FieldArray 是 FFA 的一个核心组件,可以简单、快速地创建字段数组。它接收一个 name 属性,它定义了数组的名称。

以下是一个简单的 FieldArray 范例:

-- -------------------- ---- -------
----------- ---------------
  --- ------- ---- -- -- -
    -----
      ------------------ ------ -- -
        ---- -------------------------
          --------------- -------- - ------------
          -----
            ------ ----------- ------------------ --------------------- --
          ------
        ------
      ---
      ------- ------------- ----------- -- ------------- ----- -- ----
        --- ------
      ---------
      ------------- -- ---------- -- --------------------------
    ------
  --
-------------

在这个例子中,当 FieldArray 接收到一个名为 members 的属性时,它会渲染一个包含了名为 name 的输入框的数组。它也会渲染一个按钮,该按钮会在数组中添加一个新的元素。

当表单中使用了这个 FieldArray 组件时,每个数组项都会被包含在结果对象的 members 数组中。

ArrayMutators

ArrayMutators 是一个用于操作数组的组件,可以通过props方式向Field做注入。

以下是一个简单的例子:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - ----- - ---- -------------------
------ - ----------- ---------- - ---- --------------------

------ - ------------- - ---- --------------------

----- ----- - -
  - --- --------- ----- --- ---------- --
  - --- --------- ----- --- --------- ----- --
  - --- --------- ----- --- --------- ------ -
--

----- -------- - ------ -- -
  ---------------------------------- ----- ----
--

----- ----- - -- -- -
  ----- --------------------
    --- ------------- ----- - -------- - -- -- -
      ----- ------------------------
        -------------- ------------------- --
        ----------- -------------
          --- ------ -- --
            ----------------- ------ -- -
              ---- -----------
                ------ ------------------- ----------------- ------------- --
                ----------- ------- - ----------
                ------ --------------------- ----------------- ------------------ --
                ------- ------------- ----------- -- ------------------------ --------
                  ------
                ---------
              ------
            ---
        -------------
        ------- ------------- ----------- -- ---------------------- ---------------
          --- ----
        ---------
        ------- -----------------------------
      -------
    --
  -------
--

------ ------- ------

在这个例子中,ArrayMutators组件是一个用于集成数组操作的函数;在这个例子中,你仅仅注入到form的mutators里只是remove和push两个hooks,而其他9个完整的hooks则需要原始的名为mutators的对象来提供。

注意事项

为了成功地使用Final-form-arrays,需要核对你的项目环境,特别是你的依赖项是否与使用的版本兼容。

兼容性

FFA 目前支持以下版本:

  • React: 15.4.0 或更高版本
  • React-dom: 15.4.0 或更高版本
  • Final Form: 4.21.0 或更高版本

结论

随着对前端技术栈和工具的持续发展,我们迫切需要一个行之有效的表单解决方案。使用 Final-form-arrays,你可以轻松地创建、管理和提交表单,而不必担心复杂的状态管理和数据传输。

FFA 的可定制性和灵活性也使它适合解决各种前端表单问题,在一定程度上提高了开发效率。希望这篇文章对你有所帮助!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedaa41b5cbfe1ea06103f5

纠错
反馈