背景
在日常业务开发中，有时需要获取下拉选择框(Select)除了value的其他值。在antd官网中select组件可以使用 api labelInValue ，也就是把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式。但实际开发过程中还可能需要更多的其他的值，常见接口传递，页面渲染逻辑需要；
常见方案
方案1: 劫持onChange ,select的value支持对象
interface OptionData {
id: string | number;
label: string;
extraInfo: string; // 这里根据实际情况定义额外信息的类型
}
// 假设这是你从API或其它来源获取的选项数据
const options: OptionData[] = [
{ value: 1, label: 'Option 1', extraInfo: 'Details about option 1' },
{ value: 2, label: 'Option 2', extraInfo: 'Details about option 2' },
// 更多选项...
];
const handleChange = (value: string，_option:Option) => {
const selectedOption = options.find(option => option.value === value);
if (selectedOption) {
onChange?.(selectedOption)
}
};
<Select onChange={value => handleChange(value)} options={options.map(option => ({ value: option.value, label: option.label }))} />
方案2： 利用 Select的onChange的两个参数value和option，再结合Form的使用，使用Form.ItemgetValueFromEvent 的属性获取需要额外的字段
interface OptionData {
id: string | number;
label: string;
extraInfo: string; // 这里根据实际情况定义额外信息的类型
}
const BizSelect = (props)=> {
// 假设这是你从API或其它来源获取的选项数据
const options: OptionData[] = [
{ value: 1, label: 'Option 1', extraInfo: 'Details about option 1' },
{ value: 2, label: 'Option 2', extraInfo: 'Details about option 2' },
// 更多选项...
];
return <Select {...props} options={options}>
}
/**在Form表单中使用**/
<Form>
<Form.Item name="filed" label="Filed"
getValueFromEvent={(value, _option) => {
return {
value,
key: value,
extraInfo: _option.extraInfo,
};
}}>
<BizSelect />
</Form.Item>
</Form>
but 好像方法1直接从option中取还要啥find()...;
方案3:
codesandbox.io/s/huo-de-xu… 仅仅使用 labelInValue 就可以了
后记
对比三种方式; 方案二更规范合理；
Q：
- 为啥antd不直接支持
onChange里回调的value, 有除了LabelInValue接口以外的属性；
参考 ISSUE#33069
通过只传递value，Ant Design允许开发者根据自己的具体需求去设计数据结构和处理逻辑。比如，当选项数据量非常大时，直接查找或传递整个选项对象可能会增加不必要的内存消耗和查找成本。
最后 antd ISSUES中也有相关的提问，可参考相关的问题链接:
