简介
@descco/form-builder 是一个基于 React 的表单生成组件库。它提供了一系列现成的表单组件，可以通过简单的配置快速生成表单。该组件库支持自定义表单组件，可以根据自己的需求自定义组件。
安装
使用 npm 安装 @descco/form-builder：
npm install @descco/form-builder
使用
引入组件
首先在你的项目中引入组件：
import FormBuilder from '@descco/form-builder';
渲染表单
使用 FormBuilder 组件渲染表单，需要传入一个描述表单结构的配置对象，如下：
-- -------------------- ---- -------
------ - ---- - ---- -----------------------
----- --------- - -
-
------ -----
----- --------
----- -----------
------------ -------
--
-
------ -----
----- --------------
----- ---------
-------- -
- ------ ---- ------ --- --
- ------ ---- ------ --- -
-
--
--
----- ------------- - -
--------- ---
------- ---
--
-----
---------------------
-----------------------------
------------------ -- --------------------
--在 formItems 中定义了两个表单项，分别用于输入姓名和选择性别。其中 name 字段代表该表单项的字段名，placeholder 和 options 字段根据不同类型的表单项定义不同。
initialValues 用于初始化表单的值，该对象的每个属性名对应一个表单项的字段名。
onSubmit 为表单提交事件的处理函数。
自定义组件
@descco/form-builder 支持自定义表单组件，只需在 formItems 中传入一个自定义组件的组件名即可。下面是一个自定义的日期选择器组件的示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- --------- - -
-
------ -------
----- ---------
----- -----------
---------- ----------- --
-
--高级特性
@descco/form-builder 提供了一些高级特性，比如条件渲染、动态表单项、自定义渲染器等。这里只介绍其中一些：
条件渲染
可以通过表单项的 condition 属性来定义条件渲染的规则。下面的示例会根据输入的性别来动态显示不同的表单项：
-- -------------------- ---- -------
----- --------- - -
-
------ -----
----- --------------
----- ---------
-------- -
- ------ ---- ------ --- --
- ------ ---- ------ --- -
-
--
-
------ -----
----- -----------------
----- --------
-------- -
- ------ ----- ------ ------------ --
- ------ ----- ------ ---------- --
- ------ ------ ------ ---------- -
--
---------- -------- -- ------------- --- ---
-
--在这个示例中，当选中“男”时，爱好项才会显示。
动态表单项
可以通过表单项的 generator 属性定义动态表单项的生成规则。下面的示例会根据输入的工作地点生成不同的表单项：
-- -------------------- ---- -------
----- --------- - -
-
------ -------
----- ---------
----- -----------
-------- -
- ------ ----- ------ --------- --
- ------ ----- ------ ---------- --
- ------ ----- ------ --------- -
-
--
-
------ ------
----- ---------
----- ------------
---------- -------- -- -
-- ---------------- --- ---------- -
------ -
- ------ ------ ------ --------- --
- ------ ------ ------ ---------- --
- ------ ------ ------ --------- -
--
- ---- -- ---------------- --- ----------- -
------ -
- ------ ------- ------ -------- --
- ------ ------ ------ --------- --
- ------ ------ ------ -------- -
--
- ---- -
------ -
- ------ ------ ------ ---------- --
- ------ ------ ------ ------- --
- ------ ------ ------ ---------- -
--
-
-
-
--在这个示例中，选中不同的工作地点，居住地的下拉框中显示的选项也会不同。
自定义渲染器
可以通过表单项的 renderer 属性定义自定义的渲染器。下面的示例会渲染一个自定义的表单项，在其中显示一个自定义的组件：
-- -------------------- ---- -------
----- --------- - -
-
------ -----
--------- ------ -- -
------ -
---- --------------------
---- ---------------------------------------
---- ---------------------------------------------
------
--
--
---------- ------------ --
-
--在这个示例中，渲染了一个名为“H5”的自定义表单项，其内部显示了一个名为 H5Component 的自定义组件。
总结
@descco/form-builder 是一个非常方便的表单生成组件库。它提供了丰富的表单组件和高级特性，可以快速地根据需求生成表单。 掌握了该组件库的使用方法和高级特性，可以提高开发效率，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8981e8991b448d9293