基于antd select使用 open 对下拉菜单进行自由扩展，新增唯一性判断

在Ant Design的Select组件中，你可以通过自定义下拉菜单的方式来实现新的功能，比如新增一个唯一性判断。以下是一个简单的例子，展示如何在打开下拉菜单时进行唯一性判断：

import React, { useState } from 'react';
import { Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
 
const { Option } = Select;
 
const UniqueSelect = ({ options, onSelect, ...restProps }) => {
  const [selectedValues, setSelectedValues] = useState(new Set());
 
  const handleSelect = (value) => {
    if (selectedValues.has(value)) {
      // 如果值已经存在，则不执行选择操作
      console.log('该值已经选择过，请选择其他值');
      return;
    }
    setSelectedValues(new Set([...selectedValues, value]));
    onSelect(value);
  };
 
  return (
    <Select
      {...restProps}
      dropdownRender={(menu) => (
        <div>
          {menu}
          <Divider style={{ margin: '4px 0' }} />
          <div style={{ padding: '4px', cursor: 'pointer', fontSize: 12 }} onClick={handleSelect}>
            选择一个新的值
          </div>
        </div>
      )}
      onSelect={handleSelect}
    >
      {options.map((option) => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
};
 
export default UniqueSelect;

在这个例子中，我们创建了一个名为UniqueSelect的组件，它接收options和onSelect属性，并使用useState钩子来跟踪已选择的值。handleSelect方法用于判断是否已选择了相同的值，如果已选择，则不执行任何操作；如果没有，则更新状态并调用onSelect。dropdownRender属性用于自定义下拉菜单的渲染，在这里我们添加了一个分隔线和一个可供用户选择新值的选项。

你可以像使用普通的Select组件一样使用UniqueSelect组件：

<UniqueSelect
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    // ...更多选项
  ]}
  onSelect={(value) => console.log('Selected value:', value)}
/>

当用户尝试选择已选择的值时，会看到一个提示信息，而不是实际选择该值。这个例子展示了如何在不修改Ant Design原始组件库的情况下，通过自定义行为来扩展Select组件的功能。