All files / src/tag/_example TagExample.jsx

33.33% Statements 2/6
0% Branches 0/3
20% Functions 1/5
40% Lines 2/5

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>
    </>
  );
}