介绍
cra-form-builder 是一款基于 React 和 Ant Design 的表单构建工具。该工具可以让你快速构建符合 Ant Design 风格的表单，并且支持表单校验以及自定义表单项。cra-form-builder 采用了通用的表单数据结构，使得表单数据的处理更加便捷。
安装
使用 npm 安装：
npm install cra-form-builder
或者使用 yarn 安装：
yarn add cra-form-builder
使用
引入组件
import FormBuilder from 'cra-form-builder'
渲染表单
<FormBuilder
formItems={formItems}
formRules={formRules}
onSubmit={onSubmit}
initialValues={initialValues}
/>属性说明
formItems: 表单项的配置数组，具体格式如下：
-- -------------------- ---- -------
-
-
------ -----
----- -------
----- -------
------------ --------
--------- ----
--
-
------ -----
----- ---------
----- --------
-------- -
-
------ ----
------ ------
--
-
------ ----
------ --------
-
--
--------- ----
--
-- ---
-formRules: 表单项的校验规则，具体格式可以参考 Ant Design 的校验规则，例如：
{
name: [{ required: true, message: '请输入姓名' }],
gender: [{ required: true, message: '请选择性别' }]
}onSubmit: 提交表单的回调函数，可以在该函数中对表单数据进行处理。例如：
const onSubmit = (values: any) => {
console.log(values);
};initialValues: 表单项的初始值，具体格式与formItems中一致。
自定义表单项
我们可以通过 customItems 属性来自定义表单项。
-- -------------------- ---- ------- ------ ------------ - --------- - ---- ------------------- ----- ----------- - - -------- ---------- -- ----- --------- -- ----------- ------- ---- -- --------------- ---------- --- -- -- --- ------ - -------- -- -- --- -- ------------ --------------------- --------------------- ------------------- ----------------------------- ------------------------- --
示例代码
-- -------------------- ---- -------
------ ------------ - --------- - ---- ------------------
------ - ------ - ---- ------
------ -----------
----- --------- - -
-
------ -----
----- -------
----- -------
------------ --------
--------- ----
--
-
------ -----
----- ---------
----- --------
-------- -
-
------ ----
------ ------
--
-
------ ----
------ --------
-
--
--------- ----
--
-
------ -----
----- ----------
----- -----------
-------- -
-
------ -----
------ ---------
--
-
------ -----
------ ---------
--
-
------ -----
------ -----------
-
-
--
-
------ -------
----- ---------------
----- -----------
------------ ----------
--------- ----
-
-
----- --------- - -
----- -- --------- ----- -------- ------- ---
------- -- --------- ----- -------- ------- --
-
----- -------- - -------- ---- -- -
-------------------
-
----- ------------- - -
----- ---
------- ---
-------- ---
------------- --
-
----- ----------- - -
-------- ----------
--------- ------- ---- -- ------- -------------------------
-
-------- ----- -
------ -
---- ----------------
------------
---------------------
---------------------
-------------------
-----------------------------
-------------------------
--
------
-
-
------ ------- ---总结
使用 cra-form-builder 可以轻松、快速地构建符合 Ant Design 风格的表单，并且支持表单校验和自定义表单项。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53ca7