碎碎念(一)---antd表单小用法

690 阅读3分钟

1.给表单设置初始值

小菜鸡最近在做一个电商的后台管理系统,因为UI库选的是蚂蚁的,所以不可避免的就要用到antd里面的表单啦,说来惭愧,接触antd也几个月了,还是第一次使用它的表单。废话不多说直接来~ 因为创建商品的时候需要给商品设置一大堆参数包括富文本,简介之类的,所以可能会画费运维人员一定的时间成本,为了防止页面在意外关闭的情况下重新打开还能保留之前编辑的内容,我的做法是将输入值写入缓存,然后将其设置成初始值来一小段代码 使用form的onValuesChange来监听输入字段的变化在将其写入localStorage。好的,数据的问题已经解决了,接下来就是将其设置成初始值,因为我是个小菜鸡,嗯?初始值那肯定是想都不想defaultValue啊😩,然后普通输入框还行,到了其他的例如文本框或者其他的就完全没有效果了,自闭试了几次觉得应该是form本身的特性,查了一下官网为什么 Form.Item 下的子组件 defaultValue 不生效?官网的解决办法是在让form通过initialValues来设定初始值,直接上代码:

然后在表单提交的时候清除缓存就ok啦~

2.处理提交时,表单值需要合并成对象的情况

先上个请求数据的图: 里面需要提交的是商品的规格因为其中的参数specification是根据不同模版渲染的所以不能写死,这样子我就提交表单的时候,就需要将规格的具体属性合并成一个对象了,这困扰了我好一会,以为一般提交value都是直接一个对象,里面的值就是各自item写入的值啊,我一开始的想发是想直接将比如规格里面的大小,尺寸作为和total,price这些写死的值一个层级来提交,结果这就需要我之后将这些变化的数据从对象中提取出来,放到一个新的对象specification将其作为其中的值,啊这就有点坑了,我做了很久还是没能搞定,不过这些都是废话,下面直接说一下怎么将这些属性合并提交吧 没办法的我又开始看文档看看有没有什么类似的情况,诶哟找到了Form.List这个东东就可以提供字段的数组管理,这正好和我的需求很像啊,干!话不多说直接上代码 goodModel就是我需要渲染的可变数据,然后还有一个问题就是这玩意一开始是不会显示的需要调用它本身的add函数实现增加,解决方法就是给它设置一个空的初始值,因为我提交的specification只需要一个就行了所以不需要add函数直接初始化出来就行了, 初始化代码: 最后数据看看: 完全没问题ok问题解决~ 小菜鸡第一次记录,写的很水而且可能有很多不好的地方