React antd项目中如何禁用Select下拉列表已选中的选项

问题根因 #

你的代码存在4个核心问题导致无法实现预期效果：

• 用于生成选项的newData是静态常量，没有存入React state，每次修改后的数据无法持久化，第二次触发onChange时第一次的修改会被完全重置
• onChange处理逻辑中，除了当前选中的项设为disabled: true，其余所有项都被强制设为disabled: false，直接覆盖了之前已经选中项的禁用状态
• Select组件的options属性始终绑定原始静态数据，你生成的allData没有用于组件渲染，界面不会响应禁用状态的变化
• antd Select的onChange回调参数顺序搞反：第一个参数是选中的value值，第二个才是option对象，你原代码的匹配逻辑实际是用id和对象做相等判断，本身就不成立

解决方案 #

你需要将选项数据存入state，同时维护所有已选中的id集合，修改逻辑如下：

1. 定义state存储选项数据和已选中id集合

import { useState } from 'react';
import { Select } from 'antd';

// 原始静态数据只用于初始化
const originData = [
  { id: 123, name: "Vijay" },
  { id: 345, name: "Sanket" },
  { id: 546, name: "Hitesh" },
  { id: 789, name: "Sameer" },
  { id: 421, name: "Akshay" }
];

function App() {
  // 存储选项数据，带disabled状态
  const [options, setOptions] = useState(originData);
  // 存储所有已选中的id
  const [selectedIds, setSelectedIds] = useState(new Set());

  // 其余逻辑...
}

2. 重写onChange处理逻辑

const handleOnValuesChange = (value) => {
  // 把当前选中的id加入已选集合
  const newSelectedIds = new Set(selectedIds);
  newSelectedIds.add(value);
  setSelectedIds(newSelectedIds);

  // 生成新的选项数据：所有在已选集合里的id对应的项都设为禁用
  const newOptions = originData.map(item => ({
    ...item,
    disabled: newSelectedIds.has(item.id)
  }));
  setOptions(newOptions);

  console.log("NEW DATA", newOptions);
};

3. 调整Select组件的绑定属性

return (
  <>
    <h2>Data 1</h2>
    <Select
      onChange={handleOnValuesChange}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={options.map(item => ({
        label: item.name,
        value: item.id,
        disabled: item.disabled
      }))}
      bordered={false}
    />
    <br />
    <h2>Data 2</h2>
    <Select
      onChange={handleOnValuesChange}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={options.map(item => ({
        label: item.name,
        value: item.id,
        disabled: item.disabled
      }))}
      bordered={false}
    />
  </>
);

如果需要支持取消选中后恢复选项可用，只需要在onChange逻辑里判断如果取消选中就把对应id从selectedIds集合里删除即可。

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