• 简体中文

      • API 概览

      本章节提供 Schema FormX 的完整 API 参考文档，包括组件 API、类型定义和工具函数。

      组件 API

      Form 组件

      Form 是 Schema FormX 的核心组件，用于渲染和管理表单。

      import { Form } from '@schema-formx/react';

<Form 
  schema={schema}
  layout={layout}
  components={components}
  data={formData}
  defaultData={defaultData}
  onChange={handleChange}
/>

      查看 Form API →

      Group 组件

      Group 是分组表单的容器组件，用于包裹分组内的字段。

      注意：Group 组件是 Schema FormX 的内部组件，不从 @schema-formx/react 包中导出。它由 Form 组件内部自动渲染，无需手动导入。如需自定义分组容器，请通过 components.DefaultGroup 注册自定义组件，或在 GroupSchema.component 中指定。

      查看 Group API →

      类型定义

      FieldSchema

      字段配置类型，定义单个表单字段的配置。

      type FieldSchema = {
  type?: FieldType;
  name: string;
  label: string;
  required?: boolean;
  component?: string;
  props?: Record<string, unknown>;
  hidden?: boolean;
  deps?: string[];
  onDepsChange?: OnDepsChange;
  validator?: Validator;
};

      查看详细类型定义 →

      GroupSchema

      分组配置类型，定义分组表单的配置。

      type GroupSchema = {
  key: string;
  fields: FieldSchema[];
  component?: string;
  props?: Record<string, unknown>;
};

      查看详细类型定义 →

      Layout

      布局配置类型，定义表单的样式和布局。

      type Layout = {
  formClassName?: string;
  formStyle?: CSSProperties;
  groupClassName?: string;
  groupStyle?: CSSProperties;
  fieldClassName?: string;
  fieldStyle?: CSSProperties;
  labelClassName?: string;
  labelStyle?: CSSProperties;
  tipClassName?: string;
  tipStyle?: CSSProperties;
  controlClassName?: string;
  controlStyle?: CSSProperties;
  groups?: Record<string, SetUI<'group'>>;
  fields?: Record<string, SetUI<'field' | 'label' | 'control' | 'tip'>>;
};

      查看详细类型定义 →

      FormInstance

      表单实例类型，提供表单操作方法。

      type FormInstance = {
  isDirty: () => boolean;
  getData: () => Record<string, unknown>;
  setData: (data: Record<string, unknown>) => void;
  reset: () => void;
  validate: () => Promise<{
    data: Record<string, unknown>;
    errors: Record<string, string> | null;
  }>;
};

      查看详细类型定义 →

      工具函数

      表单验证

      表单验证相关的工具函数和类型。

      type Validator = (params: ValidatorParams) => ValidatorReturn | Promise<ValidatorReturn>;

type ValidatorParams = {
  value: unknown;
  label: string;
  data: Readonly<Record<string, unknown>>;
};

type ValidatorReturn = undefined | string;

      依赖联动

      依赖联动相关的工具函数和类型。

      type OnDepsChange = (params: OnDepsChangeParams) => OnDepsChangeReturn | Promise<OnDepsChangeReturn>;

type OnDepsChangeParams = {
  deps: Array<any>;
  schema: FieldSchema;
  name: string;
  value: unknown;
  data: Readonly<Record<string, unknown>>;
  isInitialTrigger: boolean;
  trigger: string;
  triggerCount: number;
  totalTriggerCount: number;
};

      快速参考

      常用配置

      配置项类型说明
      schemaFieldSchema[] | GroupSchema[]表单字段配置
      layoutLayout布局配置
      componentsobject自定义组件映射
      dataobject受控数据
      defaultDataobject默认数据
      onChangefunction数据变化回调

      常用方法

      方法说明
      getData()获取表单数据
      setData(data)设置表单数据
      validate()验证表单
      reset()重置表单
      isDirty()检查数据变化

      常用字段类型

      类型说明默认组件
      string字符串类型Input
      number数字类型InputNumber
      boolean布尔类型Checkbox
      object对象类型自定义
      array数组类型自定义