typescript antd 使用tag组件点击标签触发文字放入到文本框中代码

在 TypeScript 和 Ant Design 中，你可以使用 `Tag` 组件结合事件处理来实现在点击标签时将文字添加到文本框的功能。首先，确保已安装了 Ant Design 的依赖，然后按照以下步骤编写代码：

import { Tag, Input } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [tags, setTags] = useState<string[]>([]);
  const [content, setContent] = useState('');

  const handleAddTag = (e: React.MouseEvent<HTMLButtonElement>) => {
    const tagValue = e.target.innerText as string;
    setTags([...tags, tagValue]);
    setContent(content + '\n' + tagValue);
  };

  return (
    <div>
      <Input.TextArea rows={4} value={content} readOnly />
      
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {/* 添加按钮 */}
        <button onClick={handleAddTag}>添加标签</button>

        {/* 标签列表 */}
        <ul>
          {tags.map((tag, index) => (
            <li key={index}>
              <Tag closable onClose={() => removeTag(index)}>
                {tag}
              </Tag>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );

  // 私有方法用于从 tags 中移除标签
  private removeTag = (index: number) => {
    setTags(prevTags => prevTags.filter((_, i) => i !== index));
    setContent(content.slice(0, -1 * tags[index].length)); // 去掉最后一个标签内容
  };
};

export default App;

在这个例子中，我们创建了一个状态变量 `tags` 来存储所有的标签，`content` 存储输入框的内容。当点击“添加标签”按钮时，会触发 `handleAddTag` 函数，将新的标签添加到列表，并更新 `content`。每个 `Tag` 元素都有 `closable` 属性，可以关闭它并从列表中删除。