解决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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
用js遍历 table的脚本
Jul 23 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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继承的一个应用
2011/09/06 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP分页类集锦
2014/11/18 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python3 queue队列模块详细介绍
2018/01/05 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python实现画出e指数函数的图像
2019/11/21 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
python可以用哪些数据库
2020/06/22 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
我的中国梦演讲稿300字
2014/08/19 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript