Input DropDown 拼接成 select组件(基于antd和react)

前言:为什么不直接用select,还要舍近求远搞input+dropdown这种缝合怪,是因为antd的select不支持选中项再编辑,效果如图

比如:选中的lucy文案变成了placeholder不能再编辑了

封装此组件虽然比较简单,但还是有弊端的,就是失去了select自带的上下键选中下拉项的功能

一、组件代码

import React, { useState, useRef, useEffect } from 'react';  
import { Dropdown, Menu, Input } from 'antd';  
import { DownOutlined } from '@ant-design/icons';  

	  
const CustomSelect = (props) => {  
      //可用props参数将方法抛出去供外部父组件使用
      const {pressEnter} = props;//例如:抛出回车事件

	  const [value, setValue] = useState('');  
	  const [options, setOptions] = useState(['洋芋果果', '测试1号', '测试2号']);  
	  const [open, setOpen] = useState(false);  

	  // 下拉菜单隐藏可见 
      const handleDropdown = (flag) => {  
	    setOpen(flag);  
	  };  
      //选中下拉项
      const handleMenu = (item,key)=>{
        setValue(item.props.label);
        setOpen(false);
      }  


	  return (  
	    <Dropdown  
	      overlay={
            <Menu
               onClick={handleMenu} 
            >
                {options.map((option, index) => (  
                    <Menu.Item key={option}>  
                        {option}  
                     </Menu.Item>  
                ))}
            </Menu>
          }  
	      trigger={['click']}  
	      visible={open}  
	      onVisibleChange={handleDropdown}  
	      getPopupContainer={() => dropdownRef.current}  
	    >  

	      <Input  
	        value={value}  
	        placeholder="请选择"  
	        suffix={<DownOutlined />}  
            onChange={(e)=>{ 
                setValue(e.target.value);
            }}
            onPressEnter={pressEnter}
	      />  
	    </Dropdown>  
	  );  
	};  

	 
	export default CustomSelect;

二、调用组件

import React from 'react';  
import CustomSelect from './CustomSelect'; // 导入自定义下拉组件  

	  
const App = () => {  
   return (  
	    <div>  
	      <CustomSelect pressEnter={(e)=>{
            console.log(e,"回调参数")
          }}/> 
	    </div>  
	  );  
  };  

export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537921.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文读懂Partisia Blockchain,被严重低估的隐私区块链生态

在今年 3 月&#xff0c;隐私公链 Partisia Blockchain 迎来了重要的进展&#xff0c;该生态通证 $MPC 上线了交易所&#xff0c;目前 $MPC 通证可以在 Kucoin、Gate、BitMart、Bitfinex、Bitture 等平台交易&#xff0c;并将在不久后上线 MEXC 平台。 在上个月上线市场至今&am…

中颖51芯片学习4. 可编程计数器阵列PCA0

中颖51芯片学习4. 可编程计数器阵列PCA0 一、PCA介绍1. PCA简介2. SH79F9476的PCA0特性3. PCA0 功能4. 时钟5. PCA0原理框图6. 工作方式 二、PCA0寄存器1. PCA0标志寄存器2. PCA使能寄存器3. PCA0方式寄存器4. P0CPMn PCA捕捉/比较寄存器5. P0FORCE强制输出控制寄存器6. PCA0计…

期货量化交易软件:MQL5 中的范畴论 (第 15 部分)函子与图论

概述 在上一篇文章中&#xff0c;我们目睹了前期文章中涵盖的概念&#xff08;如线性序&#xff09;如何视作范畴&#xff0c;以及为什么它们的“态射”在与其它范畴相关时即构成函子。在本文中&#xff0c;我们赫兹量化软件将阐述来自前期文章中的概括&#xff0c;即通过查看…

三方库移植之NAPI开发[2]C/C++与JS的数据类型转

通过NAPI框架进行C/C与JS数据类型的转换 OpenHarmony NAPI将ECMAScript标准中定义的Boolean、Null、Undefined、Number、BigInt、String、Symbol和Object八种数据类型&#xff0c;以及函数对应的Function类型&#xff0c;统一封装成napi_value类型&#xff0c;下文中表述为JS类…

基于LNMP部署wordpress

目录 一.环境准备 二.配置源并安装 三.配置Nginx 四.配置数据库 五.上传源码并替换 六.打开浏览器&#xff0c;输入虚拟机ip访问安装部署 七.扩展增加主题 一.环境准备 centos7虚拟机 关闭防火墙和seliunx stop firewalld #关闭防火墙 setenforce 0 …

隐身打击云函数CDN对抗 | 应急响应

0x00 简介 在攻防演练中&#xff0c;使用云函数来隐藏 C&C 的 ip 地址已经成为了一种“标配” 在应急处置过程中&#xff0c;我们经常遇到 netstat -pantu | grep ip 无法找到安全设备关于红队外联的告警的情况 由于 C&C 的 ip 地址是一直变化的&#xff0c;所以常…

基于深度学习的智能停车场车牌识别计费系统(完整程序+训练数据集+开题报告+论文))

摘要 本篇论文研究的是基于车牌识别技术的智能停车场管理系统&#xff0c;采用基于深度学习的车牌识别算法&#xff0c;通过卷积神经网络对车牌图像进行处理和分析&#xff0c;实现车牌字符的识别和车牌信息的提取。同时&#xff0c;本文还设计了一个智能停车场管理系统…

【网安播报】GitHub上的恶意Visual Studio 项目推送 Keyzetsu 恶意软件

1、GitHub 上的恶意 Visual Studio 项目推送 Keyzetsu 恶意软件 威胁行为者正在滥用 GitHub 自动化功能和恶意 Visual Studio 项目来推送“Keyzetsu”恶意软件的新变种并窃取加密货币付款。攻击者创建了GitHub 存储库&#xff0c;并使用各种方法来人为地提高其在平台上的受欢迎…

计费管理系统

武汉理工大学程序设计综合实验作业&#xff0c;没有完全按照要求的文件来写&#xff0c;仅供参考。 目录 菜单说明 大致思路说明 代码实现 func.h 用于存放各种功能函数的声明 tool.h 用于存放相关工具函数的声明 func.c 用于存放各种功能函数的定义 tool.c 用于存放相…

网站如果在日益变化的网络攻击中寻到一线生机

一、引言 在数字化浪潮席卷全球的今天&#xff0c;网络空间早已成为国家安全、经济发展和社会稳定的战略高地。然而&#xff0c;这片看似平静的虚拟世界&#xff0c;实则暗流涌动&#xff0c;网络攻击层出不穷&#xff0c;手段日益翻新&#xff0c;给网站的安全运营带来了前所…

蓝桥杯2022年第十三届省赛真题-最优清零方案 java

样例输入、输出&#xff1a; 输入1&#xff1a; 4 2 1 2 3 4输出1 6输入2&#xff1a; 4 2 1 2 3 4输出2 6解法&#xff1a; 滑动窗口解法如下。主要思路就是&#xff1a;用长度为k的滑动窗口&#xff0c;每遇到连续k个不为0的数&#xff0c;记录这k个数中的最小值为min&…

Nerf-Studio复现笔记

文章目录 1. Env2. Train3. Custom data3.1 Prepare3.2 Render and eval3.3 Results 4. Summary 1. Env The configuration process was smooth on Linux, but there are some problems with tiny_cuda_nn and colmap in Windows. // According to the installation document…

【MATLAB源码-第186期】matlab基于MLE算法的8天线阵列DOA估计仿真,对比粗估计、精确估计输出RMSE对比图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 第一部分&#xff1a;基本概念与系统设置 方向到达估计&#xff08;Direction of Arrival, DOA&#xff09;是信号处理中一项重要的技术&#xff0c;主要用于确定信号的到达方向。这种技术在雷达、无线通信和声纳等领域中有…

Solana主网使用自定义的RPC进行转账

1、引言 如果用 browser 连接主网的 RPC server 会收到 error code 403 message 為 Access forbidden, contact your app developer or supportrpcpool.com. 错误&#xff0c;因为主网的 RPC server 会检查 HTTP Header 如果判断出來是 browser 就会报告 403 錯誤。 要解決这…

LabVIEW闭环步进电机运动系统设计及精度分析

LabVIEW闭环步进电机运动系统设计及精度分析 在自动化设备不断发展的当代&#xff0c;闭环步进电机以其高精度和可靠性成为了自动化设备的重要组成部分。以LabVIEW软件为核心&#xff0c;结合运动控制卡及驱动器模块&#xff0c;设计并实现了一个闭环步进电机的多轴运动控制系…

加盟馅饼多少钱合适,加盟哪个馅饼品牌最好?

加盟馅饼&#xff0c;成本是创业者首要考虑的问题。合适的加盟费用应该考虑到品牌知名度、培训支持、店面选址等因素。一般而言&#xff0c;加盟馅饼的费用在几万元至数十万元之间&#xff0c;具体费用因品牌而异。重要的是&#xff0c;加盟费用不应是唯一的考量因素&#xff0…

SpringBoot3 + Vue3 + Uniapp + uView + Elenment 实现动态二级分类以及二级分类的管理

SpringBoot3 Vue3 Uniapp uView Elenment 实现动态二级分类以及二级分类的管理 1. 效果展示1.1 前端显示效果1.2 后台管理一级分类1.3 后台管理二级分类 2. 后端代码2.1 GoodsCategoryController.java2.2.1 GoodsCategoryMapper.java2.2.2 GoodsCategorySonMapper.java2.3.…

Pytest精通指南(06)Fixture scope作用域详解

文章目录 前言Scope 作用域写在测试用例函数文件写在conftest.py文件作用域总结验证默认作用域验证执行顺序遵循验证类中的fixture作用域验证重名fixture作用域 前言 从前文中&#xff0c;我们已经知道固件&#xff08;fixture&#xff09;的概念、原理、作用域&#xff0c;并且…

【年度典型案例】扫码就能领补贴?通知社保在线速办?当心是钓鱼骗局!

随着我们生活的数字化程度越来越高&#xff0c;完成各种业务和服务变得前所未有的便捷。只需轻轻一点手机屏幕&#xff0c;我们办事儿变得飞快又方便。然而&#xff0c;正当我们享受这种数字化带来的便捷时&#xff0c;一些不法分子也在暗中伺机而动&#xff0c;利用各种手段制…

k8s知识

k8s是用于容器编排和管理的&#xff0c;docker或者ctr是k8s的运行时&#xff0c;k8s通过容器运行时来启动容器&#xff0c;容器启动需要镜像&#xff0c;镜像可以用docker构建&#xff0c;dockerfile就是用于自定义如何构建镜像&#xff0c;所以上面那套流水线就是先用dockerfi…