首先,确保你已经正确引入了 Ant-Design 的标签库。其次,在你的代码逻辑中,可以通过使用 Ant-Design 提供的相关 API 来实现标签的工作。以下是一个示例:
import { Tag } from 'antd';
function MyComponent() {
const [tags, setTags] = useState(['tag1', 'tag2']);
const handleAddTag = (tag) => {
setTags([...tags, tag]);
};
const handleRemoveTag = (tag) => {
setTags(tags.filter(t => t !== tag));
};
return (
<>
{tags.map(tag => (
handleRemoveTag(tag)}>{tag}
))}
setNewTag(e.target.value)} />
>
);
}
在这个示例中,我们通过使用 Ant-Design 的 Tag
标签以及相应的 API 来实现了一个简单的标签组件。当添加或删除标签时,我们使用了 useState
钩子函数来更新标签列表。同时,我们使用了 closable
和 onClose
属性来实现可关闭的标签效果。