onChange的事件是否可以只读取内部标签的值？

Question

我有一个

Select

下拉列表，其中列出了一些

MenuItems

，但现在我想添加一个

ListSubheader

。我在从我的

event.target.value

中获取

MenuItem

时遇到问题，因为我必须将它们包装在

div

标签中，并且该事件仅检查外部

div

标签的值。

Old

menuItems

并选择下拉列表：

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

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

这很好用。

但是为了添加一个

ListSubheader

，我必须创建看起来像这样的

newMenuItem

s

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 onChange={(event) => {console.log(event.target.value}}>
  newMenuItems.map((ele) => {
    return {
      <div>
        <ListSubheader>{ele.subheader}</ListSubheader>
        
        {ele.items.map((menuItem) => {
          return (
            <MenuItem value={menuItem.value}> 
              {menuItem.name}
            </MenuItem>
          )
        })}
      </div>
    }
  })
</Select>

如您所见，在我的新选择下拉列表中，我必须将

ListSubheader

和

MenuItem

包裹在

div

标签中，我不能使用空标签，因为

Select

标签不喜欢 Fragments。

我希望能够像以前一样选择我的选项，有没有办法让事件跳过外部标签并简单地在

MenuItem

中查找值？

Answer 1

这里的问题是您返回

div

s 作为选项，但是 mui

Select

组件期望

ListSubheader

s 和

MenuItem

s 作为孩子（Grouping）。
使用上面的代码，您甚至无法选择任何选项

一个解决方案是创建一个返回基于给定数组的数组的函数：

const createOptions = (array) => {
  let options = [];
  array.forEach((element) => {
    options.push(<ListSubheader>{element.subheader}</ListSubheader>);
    element.items.forEach((item) => {
      options.push(<MenuItem value={item.value}>{item.name}</MenuItem>);
    });
  });
  return options;
}

现在您可以使用它返回选项给

Select

组件：

<Select
  onChange={(event) => {
    console.log(event.target.value);
  }}
>
  {createOptions(newMenuItems).map((element) => element)}
</Select>