Material-ui множественный выбор с optgroup

Question

У меня проблемы с настройкой группового мультиселекта с использованием material-ui в реакции. Поскольку материал пользовательского интерфейса не имеет такого встроенного компонента, я должен был сделать это сам.

Я прилагаю примеры кода и коробки моего кода. https://codesandbox.io/s/goofy-sun-2ffyv

Проблема в том, что при onchange событии я получаю значение undefined. Тем не менее, я ожидаю получить значение вместо этого.

Любая помощь и предложение приветствуется.

Answer 1

Согласно Material-ui выберите документы:

Элементы MenuItem должны быть прямыми потомками, когда native имеет значение false.

Вы используете 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>