Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1x 1x | import React, { useState } from "react"; import { Tag } from "@tencent/tea-component/lib/tag"; import { Input } from "@tencent/tea-component/lib/input"; export default function TagExample() { const [tags, setTags] = useState([]); return ( <> <Tag>这是一个标签</Tag> <hr /> <Input placeholder="按回车键生成标签" onKeyDown={e => e.keyCode === 13 && e.currentTarget.value.trim() && setTags([ ...tags, { id: Date.now(), text: e.currentTarget.value.trim() }, ]) } /> <hr /> <Tag.Group> {tags.map(({ text, id }) => ( <Tag key={id} onClose={() => setTags(tags.filter(tag => tag.id !== id))} > {text} </Tag> ))} </Tag.Group> </> ); } |