typescript antd 中使用tag标签点击标签将tag信息放入到form表单中

在 TypeScript 和 Ant Design (AntD) 的环境中，如果你想通过点击标签 (Tag) 将其内容添加到表单 (Form) 中，通常的做法是结合 Form 控件如 Input 或者带状态管理的组件库（如 React Router Context 或 Redux）。以下是一个简单的步骤说明：

1. 首先，安装必要的依赖并导入相关的组件：

import { Tag, Button, Form, Input } from 'antd';

2. 创建一个 `Tag` 组件，可以绑定一个 `onChange` 回调来处理点击事件，并存储当前选中的 tag：

type TagValue = {
  key: string;
  text: string;
};

const TagList = () => {
  const [tags, setTags] = React.useState<TagValue[]>([]);

  const handleDelete = (key: string) => {
    // 删除操作逻辑，这里简单地从数组中移除元素
    setTags(prevTags => prevTags.filter(tag => tag.key !== key));
  };

  const handleTagClick = (tag: TagValue) => {
    setTags([...tags, tag]); // 当点击新的标签时，将其添加到列表中
  };

  return (
    <div>
      <Button onClick={() => setTags([...tags, { key: Date.now().toString(), text: 'New Tag' }])}>
        Add Tag
      </Button>

      <Form>
        {/* 使用 Input 组合 Tag 自动完成功能 */}
        <Input
          addonAfter={
            <span>
              <Tag
                closable
                deleteIcon={<></>}
                onRemove={handleDelete}
                tags={tags}
                onChange={handleTagClick}
              />
            </span>
          }
          placeholder="Type to add tags"
        />
      </Form>
    </div>
  );
};

3. 在这个例子中，每次点击 `Tag` 或输入新的内容，都会更新 `tags` 状态，然后你可以选择如何在需要的地方（比如 form 的其他部分或提交表单时）使用这些标签信息。