antd的select 的key 和value获取

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

select取值.png

代码语言：javascript复制

    {/*  下拉选择框 */}

  <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的形式。
    }

代码语言：javascript复制

     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: "令狐冲"}

key label png select 对象

0 人点赞