如何为Semantic UI React下拉菜单的每一行添加可点击的删除图标

嘿，这个需求很常见！要在Semantic UI React的Dropdown下拉选项里添加可点击的删除图标，核心思路就是自定义Dropdown的option组件，把文本内容和删除图标组合起来。下面是完整的可运行示例，直接就能复用：

import React, { useState } from 'react';
import { Dropdown, Icon } from 'semantic-ui-react';

const CustomDropdownWithDelete = () => {
  // 用状态管理下拉选项列表，删除后自动更新UI
  const [dropdownOptions, setDropdownOptions] = useState([
    { key: 'item-1', text: '项目A', value: 'item-1' },
    { key: 'item-2', text: '项目B', value: 'item-2' },
    { key: 'item-3', text: '项目C', value: 'item-3' },
    { key: 'item-4', text: '项目D', value: 'item-4' },
  ]);

  // 处理删除选项的逻辑
  const handleDeleteItem = (e, itemKey) => {
    // 必须阻止事件冒泡！否则点击图标时会触发Dropdown的选项选中事件
    e.stopPropagation();
    // 过滤掉要删除的选项
    setDropdownOptions(prevOptions => prevOptions.filter(item => item.key !== itemKey));
  };

  // 自定义每个选项的内容：文本 + 删除图标
  const renderOptionContent = (item) => (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center', 
      width: '100%',
      padding: '8px 12px'
    }}>
      <span>{item.text}</span>
      <Icon
        name='trash alternate outline'
        color='red'
        onClick={(e) => handleDeleteItem(e, item.key)}
        style={{ cursor: 'pointer' }}
      />
    </div>
  );

  // 把原始选项转换成带自定义内容的选项
  const customOptions = dropdownOptions.map(item => ({
    ...item,
    content: renderOptionContent(item),
  }));

  return (
    <Dropdown
      placeholder='选择或管理选项'
      fluid
      selection
      options={customOptions}
      style={{ maxWidth: '400px', margin: '20px' }}
    />
  );
};

export default CustomDropdownWithDelete;

关键要点说明： #

• 阻止事件冒泡：e.stopPropagation()是重中之重！如果不加，点击删除图标时会同时触发Dropdown的选项选中事件，这肯定不是你想要的效果。
• 状态驱动UI：用useState维护选项列表，删除操作后会自动重新渲染Dropdown，保证数据和UI同步。
• 布局优化：通过Flex布局让文本和删除图标左右分布，加上内边距让点击区域更友好，你也可以根据需求调整样式或者用Semantic UI的内置类名来优化。

内容的提问来源于stack exchange，提问作者I Stand With Israel