解决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去字符串前后空格5种实现方法及比较
Apr 03 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
javascript代码实现简易计算器
Jan 25 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 has encountered an Access Violation
2007/01/15 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
angular中的cookie读写方法
2017/08/02 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
详解python使用turtle库来画一朵花
2019/03/21 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
小加工厂管理制度
2014/01/21 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
放假通知怎么写
2015/08/18 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Pandas自定义选项option设置
2021/07/25 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python