使用Semantic UI React，如何构建类似于Stack Overflow的标记输入？

Question

我有兴趣构建像Stack Overflow这样的Tag输入功能，其功能集包括：

1. 具有自动填充功能的输入字段（接受用户输入，从服务器获取结果并将这些结果显示给用户以便于选择。
2. 输入字段包含一个或多个所选项目作为标记。
3. 输入之外的建议，点击后将结果添加到输入字段。

Stack Overflow截图：



我正在使用Semantic-UI-React并注意到有一个可以工作的搜索组件：https://react.semantic-ui.com/modules/search

这个Semantic-UI-React搜索组件似乎不允许添加多个结果或通过输入之外的方法添加结果。我错过了什么吗？

我是否应该为此功能使用语义用户界面，还是需要在我的React应用程序中完全从头开始构建？

Answer 1

在react semantic-ui下拉文档中未正确突出显示，但 allowAdditions 字段将启用标记功能：

<Dropdown search selection multiple allowAdditions />

Answer 2

您需要添加onAddItem道具来更新选项列表。在here中，我这样做：

<Dropdown placeholder='Select Friend' fluid search selection multiple allowAdditions onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})} options={friendOptions} />

现在您可以将项目添加到下拉列表中。