React中如何获取Select组件选中值的ID？

首先，你当前的问题根源有两个：

• 用字符串数组作为data，每个选项只有文本内容，没有ID字段，自然没法获取到选中值的ID
• onChange失效大概率是因为组件对data结构有要求，字符串数组无法触发正确的事件回调传递有效数据

修复步骤： #

1. 将data改为带ID的对象数组
   把原来的字符串数组换成包含id和显示文本的对象数组，示例如下：

const subThemeOptions = [
  { id: 1, label: 'Identities' },
  { id: 2, label: 'Experiences' },
  { id: 3, label: 'Human Ingenuity' },
  { id: 4, label: 'Social Organization' },
  { id: 5, label: 'Sharing the Planet' }
];

2. 正确配置Select组件的data和onChange
   从你用的mt="md"、withinPortal这些属性看，这个Select组件大概率是Chakra UI的组件。针对Chakra UI的Select，需要指定valueKey和labelKey来映射对象里的字段，同时正确编写onChange回调：

<Select 
  mt="md" 
  withinPortal 
  data={subThemeOptions}
  valueKey="id"  // 指定用id作为选项的value值
  labelKey="label"  // 指定用label作为选项的显示文本
  placeholder="Pick one" 
  label="Sub-Theme" 
  classNames={classes}
  onChange={(e) => {
    // e.target.value就是选中项的id
    console.log('选中的ID:', e.target.value);
    // 这里可以把ID存到状态里，比如setSelectedId(e.target.value)
  }}
/>

如果是其他UI库的组件（比如Mantine、Material UI），核心逻辑一样：

• 确保data里的每个选项包含id（或value）和显示文本字段
• 参照组件文档，配置对应的字段映射属性（比如valueField、labelField）
• 在onChange回调里接收选中的对象或value值，从中提取ID

额外检查点： #

• 确认组件版本是否有已知的onChange bug，必要时升级组件包
• 检查classNames是否覆盖了组件的默认事件绑定（虽然概率低，但可以排查）

内容的提问来源于stack exchange，提问作者anonymous45678