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