材质用户界面中的自定义操作选择MenuItem

Question

我正在使用Material UI选择：https://material-ui.com/components/selects/

选择需要一些自定义功能。我已将其添加到CodePen沙箱中：https://codesandbox.io/s/material-demo-3nzpv

• 某些MenuItem可能需要显示一个删除图标。
• 选择具有删除图标的选项（但不单击删除图标本身），在选择为选定值后不应显示删除图标。但是，删除图标仍应是MenuItem的一部分。
• 单击删除图标不应选择该选项，而是触发删除图标的onClick。本质上，MenuItem的默认功能不应触发，仅应触发图标onClick。

实现此目标的最佳方法是什么？

Answer 1

在handleChange方法上，编写条件以仅在菜单项的值不具有不需要选择的值的情况下更改值

Answer 2

您需要使用renderValue组件中的Select属性，以便cu custom呈现您选择的值。

将以下行添加到您的Select组件中

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

您可以检查工作沙箱HERE的更新版本

您还可以查看有关Select道具HERE

的更多信息

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>
/>

我还更新了沙箱，其最新版本为HERE