Skip to main content

JSONSchema表单

本文介绍如何使用 JsonSchema 表单组件，通过 Json 数据高效生成表单，无需手动创建表单

该组件在企业版中支持使用

一、内容​

1、数据选项​

1.1 JSONSchema​

该选项描述了表单的字段、字段类型和校验规则。

例如这个示例：required属性还描述了其中哪些字段是必填项；properties 属性描述了表单有companyName、employees、establishedDate 字段

{
  "title": "Json Schema表单",
  "description": "定制性更强",
  "type": "object",
  "required": ["companyName", "establishedDate", "employees"],
  "properties": {
    "companyName": {
      "type": "string",
      "title": "公司名称"
    },
    "employees": {
      "type": "integer",
      "title": "员工人数"
    },
    "establishedDate": {
      "type": "string",
      "title": "成立日期"
    }
  }
}

此外，对于 companyName 字段还有这一段描述：其中限制了该字段是 string 类型，在表单中的 title 是公司名称，且最小长度为 1；

"companyName": {
    "type": "string",
    "title": "公司名称",
    "minLength": 1
},

还有其他类型：

  • array
  • number
  • integer
  • boolean
  • null

还有其他校验规则：

  • maxLength
  • max
  • min
  • 等等

除了这些校验规则，你还可以自定义校验规则，具体详情，请移步官网探索：https://rjsf-team.github.io/react-jsonschema-form/docs/

1.2 UISchema​

该选项描述了字段如何展示

例如这个示例："ui:widget": "text"规定了该字段用 text 展示，本质是input[type=text]，"ui:placeholder"规定了提示文本，"ui:description"规定了该字段描述信息

{
  "companyName": {
    "ui:widget": "text",
    "ui:placeholder": "请输入公司名称",
    "ui:description": "请输入公司的全名"
  },
  "establishedDate": {
    "ui:widget": "date",
    "ui:description": "请选择公司成立的日期"
  },
  "employees": {
    "ui:widget": "updown",
    "ui:description": "请输入员工总数，必须是整数"
  }
}

widget 类型有：

  • radio
  • select
  • color
  • textarea
  • password
  • email
  • range
  • uri
  • date
  • file
  • 等等

其中 ui:xxx 这种写法还有其他属性，具体用途请移步官网探索：https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema

1.3 FormData​

该选项就是表单的数据信息

例如这个示例：要注意，JSONSchema、UISchema、FormData 中字段要一一对应

{
  "companyName": "",
  "establishedDate": "",
  "employees": 0
}

2、属性​

2.1 是否显示​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制 JsonSchema 表单选组件在页面上是否可见

2.2 显示提交按钮​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制 JsonSchema 表单选组件中的按钮是否可见

2.3 提交按钮文案​

该功能可以设置 JsonSchema 表单选组件中按钮的文案内容

2.4 高度​

该功能可以配置 JsonSchema 表单选组件的高度大小

名称描述
固定高度通过拖拽边框来控制组件的大小，使其固定不变
自动高度组件根据画布内容及其他情况可以自行动态调整
区间自动高度与自动高度差不多，支持设置组件占用的最小、最大行数

3、事件​

3.1 提交时​

可以设置用户点击表单提交按钮时触发的事件动作

二、组件属性​

JsonSchema 表单组件支持多种属性供用户灵活开发，后面将挑选几个常用属性进行描述

如需了解更多，可以在画布中拖入一个 text 文本组件，可以看下面的示例

{
  {
    JsonSchemaForm1;
  }
}

2.1 formSchema​

该属性可以获取 JsonSchema 表单组件中 JsonSchema 选项的信息，可以看下面的示例：

{
  {
    JsonSchemaForm1.formSchema;
  }
}

2.2 sourceData​

该属性可以获取 JsonSchema 表单组件中 Formdata 选项的信息，可以看下面的示例：

{
  {
    JsonSchemaForm1.sourceData;
  }
}

2.3 formData​

该属性可以获取 JsonSchema 表单组件中所填写的信息，可以看下面的示例：

{
  {
    JsonSchemaForm1.formData;
  }
}

2.4 formUI​

该属性可以获取 JsonSchema 表单组件中 UISchema 选项的信息，可以看下面的示例：

{
  {
    JsonSchemaForm1.formUI;
  }
}

三、演练场​

官方还提供了一个演练场：

react-jsonschema-form playground
react-jsonschema-form playground favicon https://rjsf-team.github.io/react-jsonschema-form/

更多用途，等你来发现~