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

import { Button, Input, Drawer, Space, Form } from 'antd';
import { useState, useRef, useEffect } from 'react';
import type { InputRef } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

  const inputRef = useRef<InputRef>(null);
  const [items, setItems] = useState([]);
  const [name, setName] = useState('');
  const [name, setName] = useState(["test","poc"]);
  
  const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };
  
//下拉选择判断唯一性 list是已经存在的，用来判断唯一性的数组 
const addItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    if (!name) {
      notification['warning']({
        message: '请输入环境类型',
      });
      return;
    } else {
      if (name && list.includes(name)) {
        notification['warning']({
          message: '环境类型已存在，不可以重复添加',
        });

        return;
      } else {
        setItems([...items, name]);
        setName('');
        setTimeout(() => {
          inputRef.current?.focus();
        }, 0);
      }
    }
  };
 return (
		<Select
            placeholder="请选择环境类型"
            dropdownRender={(menu) => (
              <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <Space style={{ padding: '0 8px 4px' }}>
                  <Input
                    placeholder="请选择环境类型"
                    ref={inputRef}
                    value={name}
                    onChange={onNameChange}
                  />
                  <Button icon={<PlusOutlined />} onClick={addItem}>
                    新增
                  </Button>
                </Space>
              </>
            )}
            options={items.map((item) => ({
              label: item,
              value: item,
              disabled: list.includes(item),
            }))}
          />
        )

这篇好文章是转载于：学新通技术网