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

最新推荐文章于 2024-08-29 17:09:32 发布

开发小白菜

最新推荐文章于 2024-08-29 17:09:32 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd react 文章标签： react.js javascript typescript

本文链接：https://blog.csdn.net/qq_37233023/article/details/127866901

react 同时被 2 个专栏收录

15 篇文章

订阅专栏

antd

5 篇文章

订阅专栏

本文介绍了如何使用React和Ant Design实现动态选择环境类型的功能，同时确保类型唯一。通过useState和useRef，实现输入框实时更新和添加新项时的校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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),
            }))}
          />
        )