Всем привет, помогите пожалуйста разобраться с Select компонентом в material ui. Есть подобный селект в котором используется другая либа BlueprintJS, пытаюсь переписать на material ui. Вопрос в том как реализовать onItemSelect листенер в material ui?
///Material ui
<Select
labelId="demo-mutiple-chip-label"
id="demo-mutiple-chip"
multiple
value={applications}
onChange={(item) =>
console.log(item);
}
input={<Input id="select-multiple-chip" />}
renderValue={(selected) => (
<div>
{
selected.map((value, name) => {
return <Chip key={
value.id} label={
value.name} />;
})}
</div>
)}
>
{
applications.map((name) => (
<MenuItem key={
name.id} value={
name.name}>
{
name.name}
</MenuItem>
))}
</Select>
//Blueprint
<MultiSelect
items={applications}
itemRenderer={(item, itemProps) => {
return (
<MenuItem
key={
item.id}
icon={selectedItems.includes(
item.id) ? "small-tick" : "blank"}
text={
item.name}
onClick={itemProps.handleClick}
active={
itemProps.modifiers.active}
disabled={item === "No Applications"}
/>
);
}}
selectedItems={selectedItems}
onItemSelect={(item) => {
setSelectedItems(
Array.from(new Set([...selectedItems,
item.name]))
);
setSelectedItemsIds(
Array.from(new Set([...selectedItemsIds,
item.id]))
);
}}
tagRenderer={(item) => item}
onQueryChange={(string) => {
searchTags(string);
}}
fill={true}
tagInputProps={{
tagProps: {
intent: Intent.NONE,
minimal: true,
},
onRemove: remove,
rightElement: clearButton,
}}
/>