React Select组件添加ListSubheader后，onChange如何获取MenuItem的value？

问题描述 #

给Material-UI的Select下拉菜单添加ListSubheader时，因为需要用div包裹分组的子标题和选项，导致onChange事件无法正确获取MenuItem的value，事件目标变成了外层的div标签。

原有正常代码 #

菜单数据定义：

const menuItems = [
  {name: 'option A', value: 'optionA'}, 
  {name: 'option B', value: 'optionB'},
  {name: 'option C', value: 'optionC'}
];

Select组件实现：

<Select onChange={(event) => console.log(event.target.value)}>
  {menuItems.map((menuItem) => (
    <MenuItem key={menuItem.value} value={menuItem.value}> 
      {menuItem.name}
    </MenuItem>
  ))}
</Select>

添加子标题后的问题代码 #

分组后的菜单数据：

const newMenuItems = [
  {subheader: 'subheader 1', items: [
    {name: 'option A', value: 'optionA'}
  ]},
  {subheader: 'subheader 2', items: [
    {name: 'option B', value: 'optionB'},
    {name: 'option C', value: 'optionC'}
  ]}
];

带分组的Select组件：

<Select onChange={(event) => console.log(event.target.value)}>
  {newMenuItems.map((ele) => (
    <div>
      <ListSubheader>{ele.subheader}</ListSubheader>
      
      {ele.items.map((menuItem) => (
        <MenuItem value={menuItem.value}> 
          {menuItem.name}
        </MenuItem>
      ))}
    </div>
  ))}
</Select>

由于Select不支持Fragments，必须用div包裹分组内容，但外层div会干扰事件捕获，导致无法获取MenuItem的value。

三种可行解决方案 #

方案1：扁平化解构分组，移除外层div #

Material-UI的Select允许ListSubheader和MenuItem直接作为子元素并列，不需要额外的div包裹。可以用flatMap将分组结构展开为扁平的元素列表：

<Select onChange={(event) => console.log(event.target.value)}>
  {newMenuItems.flatMap((ele) => [
    <ListSubheader key={`subheader-${ele.subheader}`}>{ele.subheader}</ListSubheader>,
    ...ele.items.map((menuItem) => (
      <MenuItem key={menuItem.value} value={menuItem.value}> 
        {menuItem.name}
      </MenuItem>
    ))
  ])}
</Select>

flatMap会将每个分组的子标题和选项数组合并为一个扁平的元素数组，直接作为Select的子元素，事件可以正常捕获MenuItem的value。

方案2：利用onChange的第二个参数获取选中值 #

Material-UI的Select组件的onChange回调提供了第二个参数child，即被选中的MenuItem实例，可以直接从其props中提取value：

<Select onChange={(event, child) => {
  console.log(child.props.value); // 直接获取选中项的value
}}>
  {newMenuItems.map((ele) => (
    <div key={`group-${ele.subheader}`}>
      <ListSubheader>{ele.subheader}</ListSubheader>
      
      {ele.items.map((menuItem) => (
        <MenuItem key={menuItem.value} value={menuItem.value}> 
          {menuItem.name}
        </MenuItem>
      ))}
    </div>
  ))}
</Select>

这种方法不需要调整组件结构，直接通过回调参数绕过外层div的干扰。

方案3：让外层div跳过事件捕获 #

给外层div添加role="presentation"和pointer-events: none样式，让浏览器忽略该元素的事件交互，事件会直接穿透到内部的MenuItem。同时要给ListSubheader和MenuItem恢复pointer-events: auto，确保它们的交互正常：

<Select onChange={(event) => console.log(event.target.value)}>
  {newMenuItems.map((ele) => (
    <div 
      key={`group-${ele.subheader}`}
      role="presentation"
      style={{ pointerEvents: 'none' }}
    >
      <ListSubheader style={{ pointerEvents: 'auto' }}>{ele.subheader}</ListSubheader>
      
      {ele.items.map((menuItem) => (
        <MenuItem 
          key={menuItem.value} 
          value={menuItem.value}
          style={{ pointerEvents: 'auto' }}
        > 
          {menuItem.name}
        </MenuItem>
      ))}
    </div>
  ))}
</Select>

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