向 Semantic UI React 下拉列表的每一行添加一个按钮/图标答案

【问题标题】：Adding a button/icon to each row of a Semantic UI React dropdown向 Semantic UI React 下拉列表的每一行添加一个按钮/图标
【发布时间】：2021-03-09 14:10:23
【问题描述】：

与这个问题有关How to add a button within a dropdown menu?

Working Codesandbox

我有一个 Semantic UI React Dropdown，我想在下拉列表的每一行放置一个可点击的删除图标，类似于这张照片。

我该怎么做？

【问题讨论】：

标签： javascript reactjs typescript semantic-ui semantic-ui-react

【解决方案1】：

你可以这样做

   <Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
 <Dropdown.Menu>
  <Dropdown.Header icon='tags' content='Filter by tag' />
  <Dropdown.Divider />
  <Dropdown.Item>
    <Icon name='attention' className='right floated' />
    Important
  </Dropdown.Item>
  <Dropdown.Item>
    <Icon name='comment' className='right floated' />
    Announcement
  </Dropdown.Item>
  <Dropdown.Item>
    <Icon name='conversation' className='right floated' />
    Discussion
  </Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

如果你有一些动态数据，那么简单地映射它

<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
 >
<Dropdown.Menu>
  <Dropdown.Header icon='tags' content='Filter by tag' />
  <Dropdown.Divider />

  {
    options.map(item => <Dropdown.Item>
    <Icon name={item.icon} className='right floated' />
    {item.name}
    </Dropdown.Item>)

  }
 </Dropdown.Menu>
</Dropdown>

【讨论】：

这太棒了！感谢您的答复！我添加了一个
我现在遇到的问题是单击菜单选项不会更新下拉菜单本身。下拉菜单似乎没有听到选项选择。