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

Question

我正在构建一个 React 应用程序，我有一个 UI 语义 React 下拉菜单，允许用户 select 一种货币，目前是“欧元”或“美元”。然后 selected 货币存储在 State currency:

  const [currency, setCurrency] = useState('Euro');

下拉代码：

export const CurrencyDropdown = ({ currency, setCurrency }) => {

  const currencies = [
    {
      key: 'Euro',
      text: 'Euro',
      value: 'Euro',
    },
    {
      key: 'Dollar',
      text: 'Dollar',
      value: 'Dollar',
    },
  ];

  const handleChange = (e, { value }) => {
    setCurrency({ value }.value);
  };

  return (
    <Dropdown
      fluid
      button
      className="mini"
      selection
      options={currencies}
      onChange={handleChange}
      value={currency}
    />
  );
};

一切正常，唯一的问题是当用户点击打开下拉菜单时，我希望下拉菜单在选项列表中仅显示未 selected 货币选项（即如果“ Euro”是 selected，下拉菜单会显示未selected 选项“Dollar”以单击 )，而不是像现在这样的两种货币选项： dropdown current behaviour.

当然，当关闭时，下拉菜单仍会显示 selected 选项（在本例中为“欧元”）。

有没有办法在语义上做到这一点UI？感谢您的帮助。

Answer 1

我终于用CSS解决了。

.active.selected.item {

  display: none  !important;
  
}

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

Semantic UI React dropdown - How to display only unselected options?

semantic-ui

semantic-ui-react