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

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

semantic-ui reactjs javascript

Shea · 技术社区 · 8 年前

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

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

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

1 回复 | 直到 8 年前

MynockSpit 8 年前

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

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

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

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

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

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前