javascript - 如何在 Semantic UI React 中实现多选过滤器下拉列表

Question

我想实现一个下拉组件，在展开时显示所选选项。

这是我到目前为止所拥有的，但它标记了所选选项，这是我不想要的。我希望它们看起来类似于单个选择下拉列表，其中它们只是阴影/突出显示，但可以有多个选择。

<Dropdown
     text="Filter" 
     icon="filter"
     className="icon"
     fluid multiple selection labeled button
     options={filterOptions}
/>

Answer 1

正如您所注意到的，Semantic(当前)不支持有关多选的大量自定义。所以，你有两个基本选择。首先，您可以使用子组件自己实现下拉列表的详细信息(包括触发的所有事件)，并且仅依赖 Semantic 进行样式设置。如果您选择这条路线，您不妨编写自己的路线。

或者，您可以使用一些 Semantic 的内置功能来组合解决方案。

为此，您需要更改两个主要行为:

第一 - 您需要隐藏标签。您可以通过修改下拉列表中的 renderLabel 方法来完成此操作。从该方法返回 null 将阻止呈现标签。

第二 - 您需要取消隐藏下拉列表中选定的选项。没有内置的方法可以做到这一点，但您可以通过为每个选定的选项插入一个新的重复选项来伪造它。确保附加 onClick 以允许取消选择对象。

这是一个工作示例:https://stackblitz.com/edit/so-49442592

它有很多怪癖，所以请随意提问!