介绍
repeatable-fields-own 是一个基于 React 的 npm 包，它能够快速帮助前端开发者构建重复使用的表单组件。在表单设计中，经常会遇到需要重复填写的数据项，例如联系人信息、工作经历等等。传统的表单设计方式需要使用有限次数的表单字段来解决这个问题，但是当需要重复填写的数目增加时，这种方式就变得非常繁琐和难以维护。而 repeatable-fields-own 正是用来解决这个问题的。
安装
首先通过 npm 安装 repeatable-fields-own ：
--- ------- --------------------- ------
使用
接下来，我们将通过一个实例来介绍如何使用 repeatable-fields-own。我们将构建一个简单的联系人表单，其中需要填写联系人的姓名和电子邮件地址。由于一个表单中可能需要填写多个联系人信息，我们将使用 repeatable-fields-own 来构建这个表单。
引入库
需要在项目开发环境中引入库：
------ ---------------- ---- ------------------------
构建表单
定义表单需要展示的字段数据（可修改）：
----- ------ - - - ------ ----- ----- ------- ----- ------ -- - ------ --------- ----- -------- ----- ------- -- --
设置表单的初始数据：
----- -------- - - - ----- --- ------ -- -- --
使用 RepeatableFields 组件来生成表单：
----------------- --------------- --------------- ------------------- ----------------------------- --------------------------- --
其中，name 属性是表单在实际开发中的名称，fields 属性是定义表单字段数据的数组，initData 属性是表单的初始数据，onChange 属性是表单字段值变化后的回调函数，在回调函数中我们将表单的值存储在 state 中，以便后面的提交操作使用，onError 属性是表单字段值验证失败后的回调函数。
获取表单数据
在使用 RepeatableFields 时，可以通过 getFormValues 方法获取整个表单的数据。例如，当点击提交按钮时，可以获取表单所有联系人信息：
----- ----------- - -- -- - ----- ------ - ------------------------------- -------------------- -- ------ - - -- --------- - -- - ----- ----- ------ ------------------------ -- - ----- ----- ------ -------------------- -- - -- - --
示例代码
完整的示例代码如下：
------ ------ - --------- - ---- --------
------ ---------------- ---- ------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
--------- -
----- -
- ----- --- ------ -- --
--
------ ---
--
--
-
---------------------- - ------ ----- -- -
------------------------- -- --
------- -
-------------------
-----
--
----
--
--------------------- - ------ ------ -- -
------------------------- -- --
------- -
-------------------
------
--
----
--
----------------- - -- -- -
----- - -------- - - -------------------------------
----------------------
-- -- ----- ----- ------ ------------------------
-- - ----- ----- ------ --------------------
-- -
--
-------- -
----- ------ - -
- ------ ----- ----- ------- ----- ------ --
- ------ --------- ----- -------- ----- ------- --
--
------ -
-----
--------------
-----------------
----------
---------------
---------------
-----------------------------------
--------------------------------------
------------------------------------
--
------- --------------------------------------------
------
--
-
-
------ ------- ------------总结
通过 repeatable-fields-own，我们可以快速构建出重复使用的表单组件，并且可以方便地获取整个表单的数据。在实际开发中，我们经常遇到需要重复填写的数据项，该库可以帮助我们解决这个问题，从而提高效率和代码维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005521781e8991b448cf9b2