简介
igroot-form-container 是一个基于 Ant Design 组件库封装的表单生成器，用于快速生成表单页面。它支持多种表单组件类型，如输入框、下拉框、单选框、多选框，还支持自定义表单组件类型。
安装
igroot-form-container 可以通过 npm 安装：
npm install igroot-form-container --save
或者通过 yarn 安装：
yarn add igroot-form-container
使用
在项目中引入 igroot-form-container 组件：
import FormContainer from 'igroot-form-container' import 'igroot-form-container/dist/index.css' // 引入样式文件
然后在组件中使用 FormContainer：
<FormContainer
schema={schema} // 表单 schema
initialValues={initialValues} // 表单初始值
onSubmit={onSubmit} // 表单提交回调
/>其中，schema 是表单 schema，initialValues 是表单初始值，onSubmit 是表单提交回调。
表单 schema
schema 是一个数组，用来定义表单的结构和规则。每个元素代表一个表单项，它由以下属性组成：
type：表单类型，必填项，支持的类型有：input，textarea，select，radio，checkbox，date，switch，custom。其中，custom表示自定义表单项类型。name：表单项名，必填项。label：表单项标签，必填项。rules：表单项校验规则，选填项。options：表单项选项，选填项。它的具体格式和不同类型的表单项相关。
例如，一个包含一个输入框和一个下拉框的表单 schema 可以这样写：
-- -------------------- ---- -------
----- ------ - -
-
----- --------
----- -----------
------ ------
------ -
- --------- ----- -------- -------- --
- ---- --- -------- -------------- --
--
--
-
----- ---------
----- ---------
------ -----
-------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- --
--
--
-更多表单类型和选项的信息，请参考 igroot-form-container 的文档。
表单方法
FormContainer 组件提供了一些方法，用于操作表单。可以通过 useForm hook 或者 FormContainerWithRef 组件来获取表单实例。
useForm
可以在函数式组件中使用 useForm hook 来获取表单实例：
-- -------------------- ---- -------
------ - ------- - ---- -----------------------
-------- -------- -
----- - ---- - - ---------
----- ------------ - -- -- -
-------------
-
------ -
--------------
---------------
-----------------------------
-----------------------
--
-
-FormContainerWithRef
也可以使用 FormContainerWithRef 组件来获取表单实例：
-- -------------------- ---- -------
------ - ------ - ---- -------
------ - -------------------- - ---- -----------------------
-------- -------- -
----- ------- - --------
----- ------------ - -- -- -
------------------------
-
------ -
---------------------
---------------
-----------------------------
-----------------------
-------------
--
-
-示例代码
下面是一个完整的示例代码，包含表单 schema 和提交回调：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------- ---- -----------------------
------ --------------------------------------
----- ------ - -
-
----- --------
----- -----------
------ ------
------ -
- --------- ----- -------- -------- --
- ---- --- -------- -------------- --
--
--
-
----- ---------
----- ---------
------ -----
-------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- --
--
--
-
----- ------------- - -
--------- ---
------- ---
-
----- ------------ - -------- -- -
------------------- --------- -------
-
-------- -------- -
------ -
--------------
---------------
-----------------------------
-----------------------
--
-
-
------ ------- ------总结
igroot-form-container 是一个优秀的表单生成器，它可以大大简化表单开发的工作量，提高开发效率。本文详细介绍了它的使用方法，并提供了一个完整的示例代码，希望可以对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb693b5cbfe1ea061157d