Material-UI的Chip删除按钮怎么没反应？

Top丶若惜提问于 2026-02-01 04:38:23 阅读 109

组件

我在用Chip组件加删除功能，按照文档写了onDelete事件和delete图标，但点击叉号完全没反应。代码检查了好几遍都没发现问题，这是为什么啊？

我的代码是这样的：


<Chip
  label="测试标签"
  deleteIcon={}
  onDelete={() => console.log('删除')}
/>

控制台也没报错，图标显示正常，就是点不下去。试过把onDelete写成onDeleteClick，结果连图标都不显示了。是不是需要额外的配置？

我来解答赞 14 收藏

反馈

1 条解答

南宫亚楠 Lv1

deleteIcon 不能传空对象，直接去掉这个属性就好。你的问题是因为 deleteIcon={} 这里写了空对象，导致删除按钮失效。省事的话直接用下面这行代码：

<Chip label="测试标签" onDelete={() => console.log('删除')} />

如果需要自定义删除图标，记得传一个有效的 ReactNode，比如 <CancelIcon />。

2026-02-01 11:09