语义UI React下拉列表-如何仅显示未选中的选项？

语义UI React下拉列表：仅显示未选中的选项

基础概念

语义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;