带有 optgroup 的 Material-ui 多选答案

【问题标题】：Material-ui multiselect with optgroup带有 optgroup 的 Material-ui 多选
【发布时间】：2019-11-03 06:26:28
【问题描述】：

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

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

问题是在onchange 事件中，我得到的值是undefined。然而，我希望得到这个值。

感谢任何帮助和建议。

【问题讨论】：

我推荐react-select。您可以检查一些 examples 与多选和工作 Codesandbox
是的，谢谢您的建议。我已经用过了。但是我想用材质ui。
请进一步解释。你的解决方案有什么问题？
@Ido 我已编辑。

标签： reactjs material-ui

【解决方案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>

【讨论】：

酷，又多了一个。我怎样才能给那些被禁用的人一些填充？
@Khumoyunmirzo 根据 isOptGroup 标志提供类名。我已经更新了答案中的代码沙箱
无论如何，谢谢。你让我知道如何完成这项工作