antd的select 的key 和value获取

用户4344670

发布于 2020-02-13 16:48:36

10K0

发布于 2020-02-13 16:48:36

文章被收录于专栏：vue的实战 vue的实战vue的实战

当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 是一个对象