解决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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
深入理解 JS 垃圾回收
Jun 03 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采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python获取栅格点和面值的实现
2020/03/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
爱国口号
2014/06/19 职场文书
期末复习计划
2015/01/19 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python