typescript 标签选择

在 TypeScript 中，如果你想要创建一个允许用户进行标签选择的组件，通常会用到类似于 `<Select>` 的选择框，配合自定义选项生成器。以下是一个简单的例子，展示如何使用 TypeScript 定义和使用 `TagSelect`：

首先，安装 `antd` 和 TypeScript 支持：

npm install antd @types/react-dom @types/antd

然后，创建一个 `TagOption.ts` 文件，用于定义 Tag 选项的类型：

interface TagOption {
  value: string; // 标签值
  label: string; // 标签文本
}

export default TagOption;

接下来，在主文件中，我们可以创建一个自定义的 Tag 选择组件 `TagSelect`：

import React, { useState } from 'react';
import { Select, Option } from 'antd';
import TagOption from './TagOption';

interface TagSelectProps {
  options: Array<TagOption>;
  onChange: (selectedTags: Array<string>) => void;
}

const TagSelect: React.FC<TagSelectProps> = ({ options, onChange }) => {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const handleSelectChange = (selectedValues: Array<string>) => {
    setSelectedTags(selectedValues);
    onChange(selectedTags); // 更新外部提供的 onChange 函数
  };

  return (
    <Select
      allowClear
      optionFilterProp="label" // 这里可以根据需求定制筛选规则
      onChange={handleSelectChange}
      options={options.map(option => ({
        value: option.value,
        label: option.label,
      })) as Option<TagOption>[]}
      value={selectedTags}
    >
      {options.map(option => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
};

export default TagSelect;

最后，在使用这个组件的地方，传递 Tag 选项并提供一个函数来处理选中的标签变化：

import React, { FC } from 'react';
import TagSelect from './TagSelect';
import TagOption from './TagOption'; // 假设 TagOption 已经导出

const MyComponent: FC = () => {
  const myOptions: TagOption[] = [
    { value: 'tag1', label: 'Tag 1' },
    { value: 'tag2', label: 'Tag 2' },
    { value: 'tag3', label: 'Tag 3' },
  ];

  const handleTagChange = (selectedTags: string[]) => {
    console.log('Selected Tags:', selectedTags);
    // 这里可以进一步处理或更新你的应用程序状态
  };

  return (
    <div>
      <h1>Tag Selection</h1>
      <TagSelect options={myOptions} onChange={handleTagChange} />
    </div>
  );
};

export default MyComponent;