解决ant Design中Select设置initialValue时的大坑


Posted in Javascript onOctober 29, 2020

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

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

错误效果图:

解决ant Design中Select设置initialValue时的大坑

期待正确效果图

解决ant Design中Select设置initialValue时的大坑

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

<FormItem {...formItemLayout} label="活动红包">
       {getFieldDecorator("redPacketId", {
        rules: [{ required: true, message: "红包必填" }],
        initialValue: redPacketId + ""
       })(
        <Select>
         {redPackets.map(rp => (
          <Option key={rp.redPacketCommonId}>{rp.packetName}</Option>
         ))}
        </Select>
       )}
      </FormItem>

补充知识:ant 组件initialValue 初始值更新问题,setState和setFieldValue浅谈

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

实现场景

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

解决ant Design中Select设置initialValue时的大坑

<FormItem {...formItemLayout} label="数量">
  {
   getFieldDecorator('number', {
     rules: [{
      required: true, message: '数量',
     }],
     initialValue: this.state.peopleNum
    })(<InputNumber disabled={true} style={{ width: 120, height: 33 }} onChange={this.peopleNumChange} />)
   }
</FormItem>

起初若是子组件触发的更改就调用父组件的回调函数,函数中使用this.setState({peopleNum})的方法来更新,若是父组件自己触发的更改就直接调用this.setState({peopleNum})来更新InputNumber的值,后来发现state的值更新了,但是并没有改变InputValue的值,因此就通过 setFieldsValue来解决该问题,发现setFieldsValue直接设置值 比this.setState设置initialvalue的等级更高一点。

peopleNumChange = (value) => {
  const { setFieldsValue } = this.props.form;
  this.setState({
   peopleNum: value,
  });
  this.props.form.setFieldsValue({
   number: value, 
  })
 }

ant 自己封装的table组件initialValue 初始值更新问题

实现场景

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

解决ant Design中Select设置initialValue时的大坑

<div style={{ marginTop: 20 }}>
{getFieldDecorator('info', {
initialValue: this.state.info,
}
)(<OrderPeople handlepeople={this.peopleNumChange.bind(this)} handlecantact={this.cantactNumChange.bind(this)} />)}
</div>

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

remove(key) {
 const newData = this.state.data.filter(item => item.key !== key);
 this.setState({ data: newData });
 this.props.onChange(newData);
}

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

for (var i = 0; i < data.length; i++) {
  data[i].key = `NEW_Excel_ID_${i}`;
 }
 this.setState({
   info: data,
 });
setFieldsValue({
  info: this.state.info,
 });

注意:initialValue设置的值本应该属于Select可供选的数据中某一个,select框显示的内容就是我们所希望的红包名称,提交form表单的时候,值就是Id;如果设置的值在Select可供选数据中找不到(例如:这里的select可供选数据是redPackets),那么显示的就是Id而不是名称。

所以我们在设置initialValue的时候,应该填写的是下拉列表中包含option的value的值。

以上这篇解决ant Design中Select设置initialValue时的大坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
Vue性能优化的方法
Jul 30 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 #Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 #Javascript
解决ant Design Search无法输入内容的问题
Oct 29 #Javascript
js实现随机圆与矩形功能
Oct 29 #Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 #Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 #Javascript
design vue 表格开启列排序的操作
Oct 28 #Javascript
You might like
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
php服务器的系统详解
2019/10/12 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
《狼和小羊》教学反思
2014/04/20 职场文书
消防安全承诺书
2014/05/22 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书