代码之家 › 专栏 › 技术社区 › Shea

如何在语义UI React中实现多选过滤器下拉列表

semantic-ui reactjs javascript

Shea · 技术社区 · 6 年前

我想实现一个下拉组件,在展开时显示选定的选项。

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

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

1 回复 | 直到 6 年前

MynockSpit 6 年前

正如您所注意到的,语义(目前)不支持关于多选的大量定制。所以,你有两个基本的选择。首先,您可以使用子组件自己实现下拉列表的细节(包括所有被触发的事件),并且只依赖语义进行样式设置。如果你选择这条路线,你也可以自己写。

或者,您可以使用一些语义的内置组件来拼凑解决方案。

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

1-您需要隐藏标签。可以通过修改 renderLabel 方法。返回 null 从该方法将阻止渲染标记。

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

它有很多怪癖,所以请随时提问!

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前