快速开始

Framework:

简介

本章节将引导您在5分钟内体验 Schema FormX 的基本功能。我们将展示最简单的使用方式，并引导您完成基本配置，让您快速了解 Schema FormX 的核心能力。

Schema FormX 是一个声明式的表单解决方案，通过配置驱动的方式快速构建复杂的表单界面。

安装

安装 Schema FormX 到您的项目中：

npm

yarn

pnpm

bun

deno

npm install @schema-formx/react

示例

以下是一个用户注册表单示例，全面展示了 Schema FormX 的核心功能：

分组表单：使用 GroupSchema 将字段分为「基本信息」「联系方式」「账户设置」三个分组，并通过自定义 FormGroup 组件渲染分组标题
多字段类型：string（姓名、邮箱）、number（年龄）、boolean（协议勾选）
自定义组件：通过 component 属性指定 Select、Checkbox 等自定义组件
依赖联动：选择国家后自动更新城市选项（deps + onDepsChange）
动态隐藏：选择「企业用户」时显示公司名称字段，选择「个人用户」时隐藏（hidden）
表单验证：required 必填验证和 validator 自定义校验
实例方法：通过 ref 调用 validate() 校验、reset() 重置表单
受控模式：通过 data + onChange 实现表单数据的外部控制
实时预览：底部实时显示当前表单数据的 JSON 格式

核心概念：受控与非受控

Schema FormX 支持两种数据管理模式：

模式	属性	说明	适用场景
非受控	`defaultData`	表单内部管理数据，设置初始值后由组件自行维护	简单表单、无需外部干预
受控	`data` + `onChange`	外部完全控制表单数据，通过 `onChange` 同步状态	需要与外部状态联动、复杂业务逻辑

// 非受控模式：只需设置 defaultData
<Form schema={schema} defaultData={{ name: '张三' }} />

// 受控模式：通过 data + onChange 控制
const [formData, setFormData] = useState({ name: '' });
<Form schema={schema} data={formData} onChange={({ data }) => setFormData(data)} />

#快速开始

#简介

#安装

#示例

#核心概念：受控与非受控

快速开始

简介

安装

示例

核心概念：受控与非受控