使用optgroup

Question

我在使用material-ui设置分组多选时遇到问题。由于材料ui没有这样的内置组件，因此我必须自己做。

我正在附上我的代码的codeandbox示例。 https://codesandbox.io/s/goofy-sun-2ffyv

问题在于，在onchange事件中，我得到的值是undefined。 但是，我很期待能获得价值。

任何帮助和建议都值得赞赏。

Answer 1

根据Material-ui选择文档：

  

当native为false时，MenuItem元素必须是直接后代。

您将div用作直接元素，将MenuItems用作div的子代。
要解决此问题，我建议您更改数据的结构（我会使用isDisabled而不更改结构，但我不知道您是否要将其用于其他用途）

const posts = [
  {
    options: [
      {
        value: 'Hello',
        label: 'Hello',
        isOptGroup: true // -> the new flag
      },
      {
        value: "3",
        label: "Ойбек",
        isDisabled: true
      },
      {
        value: "2",
        label: "Чинор",
        isDisabled: true
      },
      {
        value: "1",
        label: "Озодбош",
        isDisabled: true
      }
    ]
  }
];

并且您的MenuItem将基于该标志被禁用：

<MenuItem
   key={option.value}
   value={option.value}
   className={classes.item}
   disabled={option.isOptGroup}
 >
      <ListItemText primary={option.label} />
</MenuItem>