语义UI(Semantic UI)是一个用于构建响应式布局的现代前端框架,提供了丰富的组件库。React是用于构建用户界面的JavaScript库。结合这两者,可以创建功能强大的交互式Web应用程序。
语义UI的下拉列表(Dropdown)组件有多种类型,包括基本下拉列表、搜索下拉列表、多选下拉列表等。
下拉列表广泛应用于表单输入、导航菜单、数据选择等场景。
如何在语义UI React下拉列表中仅显示未选中的选项?
默认情况下,语义UI的下拉列表会显示所有选项,无论它们是否被选中。要实现仅显示未选中的选项,需要自定义逻辑来过滤选项。
可以通过维护一个状态来跟踪已选中的选项,并在渲染下拉列表时过滤掉这些选项。
以下是一个示例代码:
import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';
const options = [
{ key: 'option1', text: 'Option 1', value: 'option1' },
{ key: 'option2', text: 'Option 2', value: 'option2' },
{ key: 'option3', text: 'Option 3', value: 'option3' },
];
const App = () => {
const [selectedOptions, setSelectedOptions] = useState([]);
const handleSelect = (e, { value }) => {
if (selectedOptions.includes(value)) {
setSelectedOptions(selectedOptions.filter(option => option !== value));
} else {
setSelectedOptions([...selectedOptions, value]);
}
};
const filteredOptions = options.filter(option => !selectedOptions.includes(option.value));
return (
<Dropdown
placeholder='Select an option'
fluid
selection
options={filteredOptions}
onChange={handleSelect}
/>
);
};
export default App;
通过上述代码,可以实现仅显示未选中的选项。selectedOptions
状态用于跟踪已选中的选项,filteredOptions
用于过滤掉已选中的选项,从而在下拉列表中仅显示未选中的选项。
领取专属 10元无门槛券
手把手带您无忧上云