Skip to content

Latest commit

 

History

History
78 lines (59 loc) · 3.89 KB

README-zhCN.md

File metadata and controls

78 lines (59 loc) · 3.89 KB

antd-schema-form

NPM version NPM version NPM version NPM version

antd-schema-form基于Ant Design,可以通过JSON Schema配置快速生成可交互的表单。

这个Demo简单的展示了通过配置schema.json构建一个表单。

开始使用

  1. React的版本>=16.7.0
  2. 组件的使用:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SchemaForm, {
  getKeysFromObject,  // 获取schema.json下所有的key
  getObjectFromValue, // object对象,格式化成表单需要的值
  getValueFromObject  // 从form获取到的表单的值,格式化成object对象
} from 'antd-schema-form';
import 'antd-schema-form/style/antd-schema-form.css'; // 引入样式

// json schema
const json = {
  id: '$root',
  type: 'object',
  title: '$root',
  properties: {}
};

ReactDOM.render(
  <SchemaForm json={ json } />,
  document.getElementById('app')
);

API

参数 说明 类型
json json schema,必需 object
value 表单的值 object
onOk 表单的确认事件 (form: object, value: object, keys: Array<string>) => void
onCancel 表单的取消事件 (form: object, keys: Array<string>) => void
okText 确认按钮文字 string
cancelText 取消按钮文字 string
footer 自定义底部内容,onOk事件参考 (form: object) => React.Node
customComponent 自定义渲染组件,参考 object
customTableRender 自定义表格列渲染组件,参考 object
languagePack 语言配置,参考 object
formOptions Form的参数,参考 object

开发和测试

  • 运行命令npm run dev,在浏览器中输入http://127.0.0.1:5050查看demo并开发。
  • 运行命令npm run buildnpm run test,在浏览器中输入http://127.0.0.1:6060运行测试用例。