如何解决Material UI Multiple Select中的可删除筹码
Material UI文档包含一个multiple select的示例,其中通过使用Chip
上的renderValue
道具,使用Select
组件呈现了选定的选项。 Select
组件的标准行为是单击当前值会打开选项列表。
我正在尝试对此进行调整,以使Chip
显示X
按钮,并且单击X
应该立即从选择中删除该项目,而不是打开选项列表
这似乎很简单,但是我无法触发onDelete
的{{1}}事件。单击Chip
仍然只会打开X
。
如何使Select
事件优先?据我对事件冒泡的了解,似乎onDelete
应该首先处理事件。
代码:
Chip
解决方法
Select
的打开是由mouse-down event触发的,而不是点击事件。
您可以通过在Chip
的删除图标上停止鼠标按下事件的传播来获得所需的行为:
<Chip
key={value}
label={value}
clickable
deleteIcon={
<CancelIcon
onMouseDown={(event) => event.stopPropagation()}
/>
}
className={classes.chip}
onDelete={(e) => handleDelete(e,value)}
onClick={() => console.log("clicked chip")}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。