React-Magento
A simple way to building HTML forms out of a JSON schema using React Antd UI.
传入 Form 的数据结构
{
title: 'Todo',
type: 'object',
sortdata: ['name', 'description'],
formOpt: {
layout: 'horizontal',
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
properties: {
description: {
type: 'string',
title: '描述',
minLength: 30,
component: 'textarea',
className: 'test'
},
name: {
type: 'string',
title: '名字',
default: 'kico',
required: true,
layout: {
labelCol: { span: 4 },
wrapperCol: { span: 14, offset: 6 }
},
},
otherinfo: {
title: '其他信息',
type: 'object',
properties: {
age: { type: 'integer' },
done: {
type: 'boolean',
title: '完成',
required: true,
default: false
},
county: {
type: 'string',
title: '国家',
enum: ['CN', 'other'],
enumNames: ['**', '其他'],
props: { inline: true }
}
}
}
}
}
使用方式
const Depict = props => {
const [state, setState] = useState({});
const changeHandler = source => {
setState(source.formData);
};
const schema = {
title: 'Todo',
type: 'object',
sortdata: ['name', 'description'],
formOpt: {
layout: 'horizontal',
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
properties: {
description: {
type: 'string',
title: '描述',
minLength: 30,
component: 'textarea',
className: 'test'
},
name: {
type: 'string',
title: '名字',
default: 'kico',
required: true,
layout: {
labelCol: { span: 4 },
wrapperCol: { span: 14, offset: 6 }
},
},
otherinfo: {
title: '其他信息',
type: 'object',
properties: {
age: { type: 'integer' },
done: {
type: 'boolean',
title: '完成',
required: true,
default: false
},
county: {
type: 'string',
title: '国家',
enum: ['CN', 'other'],
enumNames: ['**', '其他'],
props: { inline: true }
}
}
}
}
};
return (
<AntdForm
schema={schema}
formData={state}
onChange={changeHandler}
onSubmit={log('submitted')}
onError={log('errors')}
/>
);
}
Form 返回的字段
{
name: "kico",
description: "test",
otherinfo: {
age: 17,
done: true,
county: 'CN'
}
}
自定义 Api
字段 | 描述 | 类型 |
---|---|---|
sortdata | 字段排序 | array |
formOpt | antd 表单的布局 | object |
required | 字段是否必须 | boolean |
layout | Form.Item 的布局 | object |
component | 字段的展现形式 | - |
className | 字段的样式 | string |
props | 字段的其他特殊限制 | object |
condition | 字段的关联条件 | string |
option | 字段的配置 | object |
validate | 自定义字段校验 | - |
format | 自定义字段格式化 | - |