Ant Design的Tag可删标签为什么点击删除图标没反应？

司徒爱丹提问于 2026-02-13 23:57:24 阅读 99

组件

我在用Ant Design的Tag组件做可删标签，动态添加的标签删除图标点击没反应。按文档写了onChange事件，但控制台没报错，手动console.log也发现事件没触发。

尝试过给每个标签加唯一key，数据状态是用数组存储的。代码大概是这样的：


const [tags, setTags] = useState([]);
const handleTagChange = (e, tag) => {
  setTags(tags.filter(t => t !== tag));
};

return (
  {tags.map(tag => (
    <Tag key={tag} onChange={(e) => handleTagChange(e, tag)} closable>
      {tag}
    </Tag>
  ))}
)

但点击删除图标完全没响应，不知道是事件绑定方式有问题，还是状态更新哪里漏了？

Tag标签 UI组件

我来解答赞 3 收藏

反馈

1 条解答

锦灏酱~ Lv1

你这个问题出在对Ant Design的Tag组件的理解上。Tag组件本身并没有onChange这个属性，它提供的删除事件是onClose，这才是用来处理关闭操作的钩子函数。

另外你的事件处理函数写法也有问题，onClose事件会自动接收一个事件对象，并且需要调用event.preventDefault()来阻止默认行为，不然可能会触发不必要的刷新。

给你个改好的代码示例：

const [tags, setTags] = useState([]);



const handleTagClose = (tag) => {

  return (e) => {

    e.preventDefault(); // 这里要阻止默认行为

    setTags(tags.filter(t => t !== tag));

  };

};



return (

  tags.map(tag => (

    <Tag 

      key={tag} 

      closable 

      onClose={handleTagClose(tag)} 

    >

      {tag}

    </Tag>

  ))

);

这样改完应该就能正常删除了。我之前也被这个onClose坑过，官方文档有时候确实不太容易一眼就看明白。记得给每个标签设置唯一的key值，你现在的做法是对的，不过如果tag内容可能重复的话，最好用id或者其他唯一标识来当key。

还有一点小建议，状态更新时最好用函数式更新，像这样：setTags(prevTags => prevTags.filter(t => t !== tag))，这样能避免一些奇怪的bug。毕竟React的状态更新有时候不是我们想象的那么直观。

2026-02-14 13:10