教你解决蚂蚁设计中选择设置initialValue时会遇到的问题 - 行业资讯

　　介绍

本篇文章给大家分享的是有关教你解决蚂蚁设计中选择设置initialValue时会遇到的问题,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

我出现的问题,例如在编辑活动关联红包的时候,需求是选择显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为ID的时候,会出现显示是ID(需要的是显示名称);如果设置默认值initialValue是名称,那么下一步操作会出现报错

但是我还有一种情况:某个活动关联的红包被删除了,在选择中的可供选项中redPackets没有这个红包的时候,显示的会是红包ID,而不是红包名称

错误效果图:

期待正确效果图

在默认值的后面加上一个空字符串进行转换;

 & lt; FormItem {…formItemLayout}标签=盎疃彀氨?
　　{getFieldDecorator (“redPacketId", {
　　规则:[{要求:真的,信息:“红包必填“}),
　　initialValue: redPacketId +”;“
　　}) (
　　& lt; Select>
　　{redPackets。地图(rp=比;（
　　& lt;选项键={rp.redPacketCommonId}在{rp.packetName} & lt;/Option>
　　)}
　　& lt;/Select>
　　)}
　　& lt;/FormItem>

<强>蚂蚁组件initialValue初始值更新问题,设置状态和setFieldValue浅谈

组件被赋初始值了之后,有两种情况需要更新组件的价值,一种情况是子组件触发的父组件的价值的更新,另一种是父组件自己触发的价值更新。

<强>实现场景

在门票订购页面引入了一个游客信息子组件,如下图所示,可以通过子组件新增游客或删除游客来改变订购数量,也可以通过在订购页面批量导入游客来改变订购数量。

 & lt; FormItem {…formItemLayout}标签=笆?比;
　　{
　　getFieldDecorator(& # 39;数字# 39;,{
　　规则:[{
　　要求:真的,信息:& # 39;数量& # 39;,
　　}),
　　initialValue: this.state.peopleNum
　　})(& lt; InputNumber禁用={真}风格={{宽度:120,身高:33}}> peopleNumChange=(值)=比;{
　　const {setFieldsValue}=this.props.form;
　　this.setState ({
　　peopleNum:值,
　　});
　　this.props.form.setFieldsValue ({
　　数量:值,
　　}）
　　}

蚂蚁自己封装的表组件initialValue初始值更新问题

<强>实现场景

在门票订购页面引入了一个游客信息子组件,如下图所示,可以通过子组件新增游客或删除游客来直接改变子组件中游客信息,也可以通过批量导入游客信息的方式间接改变子组件中游客信息。最后父组件获取到全部游客信息在提交给后台。

& lt; div风格={{marginTop: 20}}比; 　　{getFieldDecorator(& # 39;信息# 39;,{ 　　initialValue: this.state.info, 　　} 　　)(& lt; OrderPeople handlepeople={this.peopleNumChange.bind ()} handlecantact={this.cantactNumChange.bind()}/祝辞)} 　　& lt;/div>

OrderPeople为封装的子组件,组件内部有两个函数,保存函数和删除函数,这两个函数对表格数据进行更改之后要更新父组件中的游客信息,此时父组件会向子组件自动传递一个onChange函数,使用onChange函数来更新父组件的价值值,这里内部实现是用的setFieldValue改变组件的值

删除(键){ 　　const newData=this.state.data。过滤器(项=比;项。关键!==键); 　　这一点。设置状态({数据:newData}); 　　this.props.onChange (newData); 　　}

在组件外部进行批量导入的时候,对信息数据进行修改,起初数据改变之后,在父组件中尝试设置状态发现无效,后改成setFieldsValue才生效,组件的值通过setFieldValue置了某个值之后,就不能通过设置状态改变initialValue来改变其值了。

教你解决蚂蚁设计中选择设置initialValue时会遇到的问题