React的Select组件如何在onChange中获取MenuItem的key属性

注意：React的key属性是框架内部用于列表Diff优化的专属属性，不会暴露给业务层的事件回调，无法直接在onChange中读取，可通过以下三类方案实现需求：

• 方案1：复用value属性存储关联数据
  如果允许调整value的结构，可直接将value设置为包含ID和业务值的复合对象，回调中直接解构取值即可：

// MenuItem定义逻辑
<MenuItem key={item.id} value={{id: item.id, bizValue: item.businessValue}}>
  {item.label}
</MenuItem>

// onChange回调逻辑
const handleChange = (e) => {
  const { id: selectedId, bizValue: selectedValue } = e.target.value
  // 执行后续业务逻辑
}

常见组件库（如MUI、AntD）的Select组件均支持任意类型的value值，该方案实现成本最低。

• 方案2：通过选中值遍历原始数据源查找ID
  如果不能修改原有value的格式（比如value需为固定的字符串/数字用于表单提交），可以直接用获取到的value值遍历原始菜单数据源，匹配到对应项后读取ID：

// 原始菜单数据源示例
const menuOptions = [
  {id: '001', value: 'dev', label: '开发环境'},
  {id: '002', value: 'test', label: '测试环境'},
  {id: '003', value: 'prod', label: '生产环境'},
]

const handleChange = (e) => {
  const selectedValue = e.target.value
  const selectedItem = menuOptions.find(opt => opt.value === selectedValue)
  const selectedId = selectedItem?.id
  // 执行后续业务逻辑
}

该方案无需修改现有组件属性，侵入性最小，适合存量代码改造场景。

• 方案3：通过自定义DOM属性读取ID
  可以将ID绑定到MenuItem的data-*自定义属性上，通过事件对象获取选中项的DOM节点后读取属性值：

// MenuItem定义逻辑，添加data-id自定义属性
<MenuItem key={item.id} value={item.businessValue} data-id={item.id}>
  {item.label}
</MenuItem>

// onChange回调逻辑
const handleChange = (e) => {
  const selectedEl = e.target.querySelector(`option[value="${e.target.value}"]`)
  const selectedId = selectedEl?.dataset.id
  // 执行后续业务逻辑
}

该方案依赖组件库的DOM渲染结构，若后续组件版本迭代修改DOM结构可能失效，非特殊情况不推荐使用。

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