怎么通过做网站来赚钱,平台网站建设有哪些方面,成都鲜花网站建设,修改wordpress主页form 数组中嵌套数值更新
注意#xff1a;数组是引用类型 项目需求#xff0c;表单中包含多个产品信息#xff0c;使用form.list 数组嵌套#xff0c;提货方式如果是邮寄展示地址#xff0c;如果是自提#xff0c;需要在该条目中增加两项
代码如下#xff1a;// An hi…form 数组中嵌套数值更新
注意数组是引用类型 项目需求表单中包含多个产品信息使用form.list 数组嵌套提货方式如果是邮寄展示地址如果是自提需要在该条目中增加两项
代码如下// An highlighted block
Card title产品信息 bordered{false}Form.List nameproductList {(fields, {add, remove}) ({fields.map((field,index) (Row gutter{16} {/* 用得时候只需要修改下面将需要重复展示的部分替换下面部分即可 注意 -----start*/ }Col sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label库存组织name{[field.name,kuCun]}rules{[{required: true,message: 请选择,},]}SelectSelect.Option valueu238475u238475/Select.OptionSelect.Option valueu238472u238472/Select.Option/Select/Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label产品线name{[field.name,chanPin]}rules{[{required: true,message: 请输入,},]}SelectSelect.Option valueyou1CTM-产品1/Select.OptionSelect.Option valuezi1CTM-产品2/Select.Option/Select/Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label产品名称name{[field.name,wuMiao]}rules{[{required: true,message: 请输入,},]}Input placeholder请输入 //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label提货方式name{[field.name,tType]}rules{[{required: true,message: 请输入,},]}SelectSelect.Option valueyou邮寄/Select.OptionSelect.Option valuezi自提/Select.Option/Select/Form.Item/ColForm.Item noStyle shouldUpdate{(pre,cur) {// 如果删除一条信息cur.productList[index]是空值所以需要判断if(cur.productList[index]pre.productList[index]){// 判断当前是自提还是邮寄return pre.productList[index].tType ! cur.productList[index].tType}else{return false}}}{({getFieldValue}) {const type getFieldValue(productList){/* 当前是自提的时候需要填写自提人信息 */}if(type[index].tTypetype[index].tTypezi){return Col sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label自提人姓名name{[field.name,tName]}rules{[{required: true,message: 请输入,},]}Input placeholder请输入 //Form.Item/ColCol sm{24} md{12} lg{8} xxl{6}Form.Item {...field}label身份证号name{[field.name,tShen]}rules{[{required: true,message: 请输入,},]}Input placeholder请输入 //Form.Item/Col/}else{{/* 有一个问题当切换回邮寄。之前填写的自提人和身份证号删除只需要将type数组中的数据清空即可不需要再特意给form赋值他们是引用类型 */}Object.assign(type[index],{tName:,tShen:})return /}}}/Form.Item{ /* 用得时候只需要修改下面将需要重复展示的部分替换下面部分即可 -----end*/ }div styleNameitem_btn_wrapPlusCircleFilled styleNameadd_item_btn onClick{() add({tType:zi})} /{fields.length1CloseCircleFilled styleNameremove_item_btn onClick{() remove(field.name)} /}/div/Row))}/)}/Form.List/Card**关键点解释**1. shouldUpdate 是依赖当前form中的变化。所以在其中加上判断pre是之前 cur是当前然后根据数组嵌套找到当前值变化就返回true,就会走下面的代码2. Form.Item noStyle 是没有样式的不需要添加{...field} 不是其中一项3. getFieldValue 获取当前的form值根据值来展示问题 在切换不展示时之前填写的值不清空所以重点来了 数组是引用类型 数组是引用类型 数组是引用类型
之前一直解决不了还想用setFomValue来解决根本不用因为数组是引用类型所以直接操作原来的数组值就可以
// An highlighted block
Object.assign(type[index],{tName:,tShen:})
