美文网首页
antd的select 的key 和value获取

antd的select 的key 和value获取

作者: 冬天的_太阳 | 来源:发表于2020-01-15 17:07 被阅读0次
    • 当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: "令狐冲"}

    相关文章

      网友评论

          本文标题:antd的select 的key 和value获取

          本文链接:https://www.haomeiwen.com/subject/zvgtzctx.html