如何使用 ReactJS 从下拉列表中选择多个选项作为标签？

在 ReactJS 中，我们可以使用许多库和组件来实现用户界面的多种功能。其中，下拉列表是最常见的组件之一。但是，当我们需要从下拉列表中选择多个选项作为标签时，会有些困难。因此，我们需要使用第三方库来完成这个任务。

使用 react-tagsinput 库

React-tagsinput 是一个简单易用的 ReactJS 库，它允许我们在输入框中轻松添加和删除标签。下面是如何使用它来实现从下拉列表中选择多个选项作为标签的示例代码：

import React, { useState } from 'react';
import TagsInput from 'react-tagsinput';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-tagsinput/react-tagsinput.css';

const TagPicker = ({ options }) => {
  const [tags, setTags] = useState([]);

  const handleTagChange = newTags => {
    setTags(newTags);
  };

  return (
    <div>
      <Typeahead
        options={options}
        multiple
        onChange={handleTagChange}
        selected={tags}
      />
      <TagsInput value={tags} onChange={handleTagChange} />
    </div>
  );
};

export default TagPicker;

这个 TagPicker 组件包括两个部分：Typeahead 和 TagsInput。Typeahead 是一个下拉式菜单，用于选择候选标签。TagsInput 则用于显示和编辑已选标签。

首先，我们使用 useState 钩子来声明 tags 变量。我们将使用它来跟踪选择的标签。

接下来，我们定义一个 handleTagChange 函数，用于处理标签改变事件。它接受一个参数 newTags，它是由 Typeahead 或 TagsInput 组件传递的新标签列表。在这个函数中，我们将新标签列表存储在 tags 变量中，以便稍后将其传递给 TagsInput 组件。

在组件的 return 语句中，我们首先将 Typeahead 组件渲染为下拉式菜单。我们通过将 options 和 multiple 属性传递给它来启用多选。

然后，我们将 handleChange 属性设置为 handleTagChange 函数。这意味着当用户从下拉列表中选择一个新标签时，它将被添加到 tags 变量中。

最后，我们将 selected 属性设置为 tags 变量。这将确保 Typeahead 组件始终显示当前选择的标签。

接下来，我们使用 TagsInput 组件来显示和编辑已选标签。我们将 value 属性设置为 tags 变量，以确保它和 Typeahead 中选择的标签列表相同。我们将 onChange 属性设置为 handleTagChange 函数，这样当用户添加或删除标签时，我们就可以更新 tags 变量。

结论

使用 ReactJS 和 react-tagsinput 库，我们可以轻松地从下拉列表中选择多个选项作为标签。这个库非常灵活和易于使用，因此可以满足您的需求，并为您的用户提供更好的体验。