antd输入框多标签输入

要实现antd输入框多标签输入的功能，您可以使用antd的`Select`组件和`Tag`组件。`Select`组件提供了下拉列表，而`Tag`组件可以展示多个标签。

以下是一个简单的示例代码，展示如何使用`Select`组件和`Tag`组件实现多标签输入：

import { Select, Tag } from 'antd';

const { Option } = Select;

function MyComponent() {
  const [tags, setTags] = useState([]);

  const handleSelect = (value) => {
    if (!tags.includes(value)) {
      setTags([...tags, value]);
    }
  };

  const handleTagClose = (tag) => {
    const newTags = tags.filter((t) => t !== tag);
    setTags(newTags);
  };

  return (
    <div>
      <Select
        mode="tags"
        style={{ width: '100%' }}
        onSelect={handleSelect}
        tokenSeparators={[',']}
      >
        <Option value="apple">Apple</Option>
        <Option value="banana">Banana</Option>
        <Option value="orange">Orange</Option>
      </Select>
      <div style={{ marginTop: 16 }}>
        {tags.map((tag) => (
          <Tag closable onClose={() => handleTagClose(tag)} key={tag}>
            {tag}
          </Tag>
        ))}
      </div>
    </div>
  );
}

在上面的代码中，我们使用了`Select`组件，并将其`mode`属性设置为`tags`，以启用多标签输入。我们还设置了`onSelect`回调函数，以在用户选择新标签时更新标签列表。

我们还使用了`Tag`组件，在一个`div`中展示了所有已选择的标签。当用户关闭标签时，我们使用`onClose`回调函数从标签列表中移除该标签。

注意，我们还设置了`tokenSeparators`属性为`[',']`，以指定用户用逗号分隔每个标签。

除了上面的示例代码，您还可以使用其他antd组件和属性来自定义多标签输入的外观和功能。有关更多信息，请参阅antd文档。