antd Select onChange获取除了value其他的值

在日常工作中,有时候需要获取下拉选择框除了value其他的值,在antd 官网中可以使用api labelInValue;每个选项的 label 包装到 value 中,会把 Select 的 value 类型从string变为 { value: string, label: ReactNode } 的格式但是实际开发过程中这种远远不能满足需要:import { Select } from 'a

superTiger_y

7814人浏览 · 2021-09-17 10:20:52

superTiger_y · 2021-09-17 10:20:52 发布

在日常工作中,有时候需要获取下拉选择框除了value其他的值,在antd 官网中可以使用api labelInValue; 每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式

但是实际开发过程中这种远远不能满足需要:

import { Select } from 'antd';

const { Option } = Select;

const opts = [
    {label:'1',value:1,data:{label:'这里用你的数据',value:[1,2,3,4]}},
    {label:'2',value:2,data:{label:'博客名:',value:'superTiger_y'}},
]

// evt 就是在opt中中绑定的data
  function handleChange(value, evt) {
    console.log('这里能拿到你在opts中定义的数据data:', evt);
  }

ReactDOM.render(
  <>
     <Select
        defaultValue="lucy"
        style={{ width: 120 }}
        onChange={handleChange}
      >
        {opts.map((item, index) => (
          <Option value={item?.value} key={index} data={item?.data}>
            {item?.label}
          </Option>
        ))}
      </Select>
  </>,
  mountNode,
);