专栏首页vue的实战antd的select 的key 和value获取

antd的select 的key 和value获取

  • 当key和 value值不相同的时候。
  • 需要显示value 但是传递给后台的key。

select取值.png

    {/*  下拉选择框 */}

  <Select labelInValue  defaultValue={{ key: 3 }} style={{ width: 120 }} onChange={this.handleChange.bind(this)}>
  {
 this.state.listData.map((item,index) => {
     return <Option value= { item.key } key={index} >{item.name }</Option>
  })

  }  
   </Select>

  handleChange(val) {
        console.log(val); ///{ key: 2, label: "令狐冲"} 
// 始终是 key label的形式。
    }
     listData: [
                {key: 1,name: '李逍遥'},
                {key: 2,name: '令狐冲'},
                {key: 3,name: '杨过'},
                {key: 4,name: '郭靖'},

            ]

*默认情况下 onChange 里只能拿到 value,如果需要拿到选中的节点文本 label,可以使用 labelInValue 属性。 选中项的 label 会被包装到 value 中传递给 onChange 等函数,此时 value 是一个对象

  • 关于默认值: defaultValue={{ key: 3 }} key是几(key并不是对应 listData的key),就显示第一个name。
  • key: 2, label: "令狐冲"}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue的表格动态渲染

    用户4344670
  • js中绑定事件与解除绑定事件的3种方式

    用户4344670
  • 2019-08-21 常用正则

    用户4344670
  • 算法原理系列:散列表

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1147447
  • 深入了解ProcessFunction的状态操作(Flink-1.10)

    学习Flink的ProcessFunction过程中,官方文档中涉及状态处理的时候,不止一次提到只适用于keyed stream的元素,如下图红框所示:

    程序员欣宸
  • 【Flutter 专题】39 图解 Android 打包 APK 文件

    和尚是搞 Android 的,曾经尝试过打包 APK 文件失败,由于种种原因暂停研究,今天重新学习一下如何打包 APK 。官网讲解的清楚明了,和尚在...

    阿策
  • redis 学习(3)-- String 类型

    当我们通过 id 查找相关信息,redis 做中间层,当数据缓存在 redis 中时,我们直接返回该数据,如果 redis 中不存在,就到 MYSQL 中查...

    希希里之海
  • 【Redis】Redis常用命令

    expire key seconds 当超过过期时间,会自动删除,key在seconds秒后过期 expireat key timest...

    用户5522200
  • 在微博微信场景下学习Redis数据结构

    这个是微信公众号的文章阅读量数量的统计,可以通过redis的string数据结构来解决。使用incr原子操作命令,redis的key是article:readc...

    程序员小强
  • Redis学习二(数据操作).

    在 redis-cli 中使用中文时,必须打开 --raw 选项,才能正常显示中文。

    JMCui

扫码关注云+社区

领取腾讯云代金券