form-render的简单使用心得（FormRender现已升级到XRende）_第1页
form-render的简单使用心得（FormRender现已升级到XRende）_第2页
form-render的简单使用心得（FormRender现已升级到XRende）_第3页
form-render的简单使用心得（FormRender现已升级到XRende）_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

form-render的简单使⽤⼼得（FormRender现已升级到XRende）偶尔⼀次使⽤了，使⽤⽅便简单，通过简单的Schema就可以⽣成表单，很符合数据驱动这⼀理念，基本需求也都能满⾜。但是作为新兴的react第三⽅包，缺点就是互联⽹上相关资料太少，在使⽤过程中想要熟悉⼀些API的使⽤，相关实例也较少。具体使⽤事例如下：简单⽰例//使⽤AntDesign体系importFormRenderfrom"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中使⽤<FormRenderschema={schema}formData={formData}onChange={setFormData}/>Schema⽤于描述表单的基本信息、结构和校验，其中type类型则是表单的类型（表现在UI），⽀持string、number、boolean、array、object、rangedefault是表单的默认值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需要花费过长时间，如若需要可互相交流Letyourselfgraduallyexcellent最近⼜有需求⽤到formrender了，不得不说更新很快，⼜增加了些许Api。表单之间的联动增加了⼀个watc监听constform=useForm();constwatch={//#为全局'#':val=>{console.log('表单的时时数据为：',val);},input1:val=>{form.setValueByPath('input2',val);

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论