import React, { useState } from "react";
import { Tag, Input } from "@tencent/tea-component";

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