Пользовательские действия в интерфейсе материалов выберите MenuItem

Question

Я использую Material UI Select: https://material-ui.com/components/selects/

Для выбора требуется немного пользовательских функций. Я добавил это в изолированную программную среду CodePen: https://codesandbox.io/s/material-demo-3nzpv

• На некоторых элементах MenuItem может потребоваться отображение значка удаления.
• Выбор параметра, для которого необходимо удалить Значок (но не щелкая сам значок удаления) не должен отображать значок удаления после выбора в качестве выбранного значения. Значок удаления должен оставаться частью MenuItem.
• Нажатие на значок удаления не должно выбирать опцию, а вместо этого вызывает onClick значка удаления. По сути, функциональность по умолчанию для MenuItem не должна срабатывать, только значок onClick.

Как лучше всего это сделать?

Answer 1

Вам необходимо использовать renderValue опору из вашего Select компонента, чтобы пользовательская визуализация выбранного вами значения была возможна.

Добавьте следующую строку в ваш Select компонент

renderValue={value => currencies.find(el => el.value === value).label}

Вы можете проверить обновленную версию своей рабочей песочницы ЗДЕСЬ

Также вы можете проверить больше на Select реквизит ЗДЕСЬ

LE: Обновление для точки 3

В вашем <DeleteIcon> обработчике onClick вам необходимо остановить дальнейшее распространение события. В функции handleDelete() добавьте параметр event и используйте метод e.stopPropagation().

const handleDelete = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.stopPropagation();
    console.log("Delete");
};

И ваш компонент должен выглядеть следующим образом

<MenuItem key={option.value} value={option.value}>
    <div>{option.label}</div>
    <div>{option.action && <DeleteIcon onClick={handleDelete}/>}/div>
</MenuItem>
/>

Я также обновил песочницу с последней версией ЗДЕСЬ

Answer 2

В вашем методе handleChange напишите условие для изменения значения только в том случае, если значение элемента меню не имеет значения, которое не нужно выбирать