React项目中Antd Select组件删除选项的实现问题

你遇到的问题是Antd Select默认会将Option内的所有内容原样渲染到选中区域，所以删除图标跟着显示出来了。可以通过以下两种方式解决：

方法一：利用Select的自定义选中项渲染（推荐） #

通过开启labelInValue属性让选中值包含label信息，再用render（Antd v4）或renderTag（Antd v5）自定义选中区域只显示文字：

代码示例（Antd v4） #

import { useState } from 'react';
import { Select, DeleteOutlined } from 'antd';
const { Option } = Select;

const TaskSelect = () => {
  const [selectedTask, setSelectedTask] = useState(null);
  const [tasks, setTasks] = useState([
    { value: 'task1', label: '完成用户需求分析' },
    { value: 'task2', label: '编写组件测试用例' },
  ]);

  const handleDelete = (taskToDelete, e) => {
    // 阻止事件冒泡，避免触发选项选中
    e.stopPropagation();
    // 替换为你的删除接口调用逻辑
    const updatedTasks = tasks.filter(task => task.value !== taskToDelete.value);
    setTasks(updatedTasks);
    // 如果删除的是当前选中项，清空选中状态
    if (selectedTask?.value === taskToDelete.value) {
      setSelectedTask(null);
    }
  };

  return (
    <Select
      value={selectedTask}
      onChange={setSelectedTask}
      labelInValue
      // 自定义选中项只显示label文本
      render={(selected) => selected?.label}
      style={{ width: 200 }}
    >
      {tasks.map(task => (
        <Option key={task.value} value={task.value}>
          <span>{task.label}</span>
          <span style={{ float: 'right', color: '#ff4d4f' }}>
            <DeleteOutlined onClick={(e) => handleDelete(task, e)} />
          </span>
        </Option>
      ))}
    </Select>
  );
};

export default TaskSelect;

针对Antd v5的调整 #

v5中把render换成renderTag即可：

<Select
  value={selectedTask}
  onChange={setSelectedTask}
  labelInValue
  renderTag={(props) => <span>{props.label}</span>}
  style={{ width: 200 }}
>
  {/* 选项内容同上 */}
</Select>

方法二：通过CSS隐藏选中区域的图标 #

如果不想修改组件逻辑，也可以用CSS精准控制：

/* 隐藏选中标签里的删除图标 */
.ant-select-selection-item .anticon-delete {
  display: none;
}

/* 保留下拉菜单里的删除图标 */
.ant-select-dropdown-menu-item .anticon-delete {
  display: inline-block;
}

这种方式缺点是依赖Antd的类名，若组件版本更新类名变化可能失效。

关键注意点 #

• 点击删除图标时要调用e.stopPropagation()，否则会同时触发Option的选中事件。
• 删除后记得更新选项列表和选中状态，避免出现已删除的选项仍被选中的情况。

内容的提问来源于stack exchange，提问作者Drashti Kheni