偶尔一次使用了form-render表单生成器,使用方便简单,通过简单的Schema就可以生成表单,很符合数据驱动这一理念,基本需求也都能满足。
但是作为新兴的react第三方包,缺点就是互联网上相关资料太少,在使用过程中想要熟悉一些API的使用,相关实例也较少。具体使用事例如下:
简单示例
// 使用 Ant Design 体系
import FormRender from "form-render/lib/antd";
// 首先写好完整的'数据'
"schema": {
"type": "object",
// (更新后的1.x与0.x写法略有区别)
"labelWirth": 130,
"properties": {
"string": {
"title": "输入框",
"type": "string"
},
"select": {
"title": "可选择",
"type": "string",
"enum": [
"a",
"b",
"c"
],
"enumNames": [
"1",
"2",
"3"
]
}
}
},
// onChange事件可以动态获取表单状态
"formData": {
"string": "",
"select": "a"
}
// '数据'作为属性值拿到FormRender中使用
<FormRender schema={schema} formData={formData} onChange={setFormData} />
Schema用于描述表单的基本信息、结构和校验,
其中type类型则是表单的类型(表现在UI),支持 string、number、boolean、array、object、range
default是表单的默认值
uiSchema属性来控制表单项的 UI 展示
如:
'ui:className': 'qttitle' // 添加标题格式
'ui:readonly': true // 禁止改动,只读
'ui:widget': 'switch' //开关形式
'ui:disabled':'{{rootValue.optionName === true}}' // 隐藏(一些互斥关系)
"schema": {
"type": "object",
"properties": {
"string": {
"title": "字符串",
"type": "string",
"ui:width": "50%" //此时表单的宽度为50%
}
}
}
列举皆为简单控件的实现,因工作原因互斥关系等操作不宜展示,因为在实现过程中因为示例较少,理解API需要花费过长时间,如若需要可互相交流
Let yourself gradually excellent
最近又有需求用到formrender了,不得不说更新很快,又增加了些许Api。
表单之间的联动增加了一个watc监听
const form = useForm();
const watch = {
// # 为全局
'#': val => {
console.log('表单的时时数据为:', val);
},
input1: val => {
form.setValueByPath('input2', val);
},
};
return <FormRender form={form} schema={schema} watch={watch} />;```