解决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 checkbox(复选框) 使用集锦
Apr 28 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
javascript 闭包详解
Jul 02 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 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调用数据库的存贮过程
2006/10/09 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
生成二维码方法汇总
2014/12/26 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
2014党员自我评议表范文
2014/09/20 职场文书
2014年网管工作总结
2014/12/11 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
鲁迅故里导游词
2015/02/05 职场文书
个人求职意向书
2015/05/11 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python 正则模块详情
2021/11/02 Python