实现Dropdown下拉菜单监听键盘上下键选中功能-React

用过ant design的小伙伴都知道,select组件是支持联想搜索跟上下键选中的效果的,但是在项目中我们可能会遇到用select组件无法实现我们的需求的情况,比如说一个div框,里面有input,又有tag标签,在input中输入内容触发联想,然后选中其中某一个,以tag标签的形式回填到div框中(类似这种需求)。这个时候,我们可以采用ant design的dropdown组件来帮助我们实现。

getBoundingClientRect()方法可以获取元素的大小及其相对视口的位置,这样可以帮助对元素是否在可视区域内进行判断

getBoundingClientRect() 是一个在 DOM(文档对象模型)中常用的方法,它返回一个 DOMRect 对象,
该对象提供了元素的大小及其相对于视口的位置。这个方法非常有用,
特别是在需要知道元素在页面上的确切位置或尺寸时。DOMRect 对象包含以下属性:x:元素左上角相对于视口(viewport)的 x 坐标(包括任何滚动偏移)。
y:元素左上角相对于视口(viewport)的 y 坐标(包括任何滚动偏移)。
width:元素的宽度(包括内边距 padding,但不包括边框 border、外边距 margin 和滚动条)。
height:元素的高度(包括内边距 padding,但不包括边框 border、外边距 margin 和滚动条)。
top:元素顶部边缘相对于视口(viewport)的 y 坐标(包括任何滚动偏移)。
right:元素右边缘相对于视口(viewport)的 x 坐标(包括任何滚动偏移)。
bottom:元素底部边缘相对于视口(viewport)的 y 坐标(包括任何滚动偏移)。
left:元素左边边缘相对于视口(viewport)的 x 坐标(包括任何滚动偏移)。

页面布局代码 ,需要根据实际情况来进行调整

componentDidMount(){// 添加键盘事件监听  document.addEventListener('keydown', this.handleKeyDown);
}// 渲染下拉项
showGroupContcatMenu = ()=>{const {contactSearchList, currentFocusMenuIndex} = this.state;return <Menu>{contactSearchList.map((item, index)=>(<Menu.Item id={"dropdown-menu-item-" + index} key={item.id} onClick={()=>this.handleSelectMenuItem(item)} style={{background: index == currentFocusMenuIndex ? '#fff5e6' : ''}}><div>{item.name}&nbsp;&nbsp;{item.enterpriseName}&nbsp;&nbsp;<span>{item.email && `<${item.email}>`}</span></div></Menu.Item>))}<Menu.Item id={"dropdown-menu-item-" + contactSearchList.length} key={contactSearchList.length} style={{background: currentFocusMenuIndex == contactSearchList.length ? '#fff5e6' : ''}} onClick={()=>this.openGroupContcatIcon(null)}>搜索联系人</Menu.Item></Menu>}// 布局代码
<div className="tag">{selectContact.length > 0 && selectContact.map(item=>(<Popover key={item.id} trigger="click" content={<Spin spinning={showPhoneLoading}><span style={{userSelect:'none'}}>{showPhoneLoading?'':trueEmail}</span></Spin>} overlayClassName='contact-email-tip'onVisibleChange={(visible) => this.onPopoverVisibleChange(visible, item)}><Tag key={item.id} closable={true} onClose={(e)=>this.handleClose(item.id,item,e,'searchGroupContcat','contact')}>{item.name}{item.hiddenEmail || item.email || item.disPlayEmail?<span>&nbsp;&nbsp;</span>:''}{item.hiddenEmail || item.email || item.disPlayEmail}</Tag></Popover>))}<Dropdown visible={onKeywordsContact ? true : false}overlay={()=>this.showGroupContcatMenu()} overlayClassName='bropdown-overlay-class'destroyPopupOnHide={true} ><div>{getFieldDecorator('onKeywordsContact', {initialValue: '',})(<AInput className="input" onBlur={(e)=>this.handleBlur('onKeywordsContact')}onPressEnter={this.handleInputPressEnter}onChange={this.handleGroupContcatChange}/>)}</div></Dropdown>
</div>

监听键盘响应事件的核心代码

handleKeyDown = (event) =>{const {onKeywordsContact, currentFocusMenuIndex, contactSearchList} = this.statelet newCurrentFocusMenuIndex = currentFocusMenuIndex;if (event.key === 'ArrowUp' && onKeywordsContact) {  event.preventDefault(); newCurrentFocusMenuIndex = currentFocusMenuIndex <= 0 ? contactSearchList.length : currentFocusMenuIndex - 1;this.scrollIntoViewIfNeeded(newCurrentFocusMenuIndex, contactSearchList.length);} else if (event.key === 'ArrowDown' && onKeywordsContact) {  event.preventDefault();  newCurrentFocusMenuIndex = currentFocusMenuIndex >= contactSearchList.length ? 0 : currentFocusMenuIndex + 1;this.scrollIntoViewIfNeeded(newCurrentFocusMenuIndex, contactSearchList.length);}  this.setState({currentFocusMenuIndex: newCurrentFocusMenuIndex // 记录当前选中高亮的元素}) }scrollIntoViewIfNeeded = (newCurrentFocusMenuIndex, maxLength)=>{const ulEle = $('.bropdown-overlay-class .ant-dropdown-menu')[0];const liEle = $('#dropdown-menu-item-' + newCurrentFocusMenuIndex)[0];const ulRect = ulEle.getBoundingClientRect();  const liRect = liEle.getBoundingClientRect();if(newCurrentFocusMenuIndex == 0){ulEle.scrollTop = 0;} else if(newCurrentFocusMenuIndex == maxLength){ulEle.scrollTop = ulEle.scrollHeight;} else {// 检查li是否在ul的上方  if (liRect.top < ulRect.top) {  // 滚动ul到li的顶部位置  ulEle.scrollTop = liEle.offsetTop;  }  // 检查li是否在ul的下方(这里假设我们不想滚动超过li的底部)  else if (liRect.bottom > ulRect.bottom) {  // 滚动ul到li的底部位置减去ul的高度,以确保li的底部在可视区域内  ulEle.scrollTop = liEle.offsetTop + liEle.offsetHeight - ulEle.offsetHeight;   }  }}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探究 Cosmos Hub 作为国家行为者的可能性

原文标题&#xff1a;《Cosmos Hub: The First Democratic State of Capital》 撰文&#xff1a;Vittecoq Quentin&#xff0c;University of Toulon 编译&#xff1a;Tia&#xff0c;Techub News 本文来源香港Web3媒体&#xff1a;Techub News 介绍 让-雅克卢梭曾断言&am…

LAMP网络服务架构

目录 LAMP 网站服务架构 LAMP的组成部分 LAMP的构建顺序 安装论坛 0.电脑已编译安装Apache&#xff0c;MySQL&#xff0c;PHP 1.创建数据库&#xff0c;并进行授权 2.上传论坛压缩包到 /opt ,并解压 3.上传站点更新包 4.更改论坛目录的属主 5.浏览器访问验证 LAMP 网…

【第4章】SpringBoot实战篇之登录优化(含redis使用)

文章目录 前言一、整合redis1. 引入库2. 配置 二、登录优化1.登录2.拦截器3. 登出4. 修改密码 总结 前言 上一章的登录接口,我们将用户登录信息放置于Map中,存在一个问题,集群部署无法共享以及应用停止用户登录信息即丢失,接下来我们整合redis来整合这个问题。 一、整合redis …

代码随想录35期Day59-JavaScript(day58休息)

Day59题目 LeetCode503下一个更大元素 核心思想:和之前的下一个更高温度差不多,使用单调栈,只不过这个需要你循环查找,可以通过遍历两次数组实现 /*** param {number[]} nums* return {number[]}*/ var nextGreaterElements function(nums) {var len nums.lengthvar res …

低代码平台:打破数据孤岛的利器,推动企业数字化转型

随着数字化浪潮的汹涌而至&#xff0c;企业对于快速开发应用程序的需求变得日益迫切。在这样一个快速变化的时代&#xff0c;如何能够高效地开发并上线新的应用程序&#xff0c;以满足市场和客户的不断变化的需求&#xff0c;成为了企业面临的一大挑战。而低代码开发平台&#…

RSA密钥生成、加解密代码

背景介绍 RSA公钥加密算法是1977年由罗纳德李维斯特&#xff08;Ron Rivest&#xff09;、阿迪萨莫尔&#xff08;Adi Shamir&#xff09;和伦纳德阿德曼&#xff08;Leonard Adleman&#xff09;一起提出的。1987年首次公布&#xff0c;当时他们三人都在麻省理工学院工作。RSA…

强化学习(一) 基本概念和赌博机问题

文章目录 什么是强化学习强化学习的两个基本特征强化学习的其它特征强化学习不同于有监督学习强化学习不同于无监督学习强化学习不同于进化方法强化学习的独特挑战强化学习典例 强化学习的要素强化学习的适用范围强化学习学术主线解决强化学习问题的一般框架赌博机两个影响因素…

SiT : Self-supervised vision Transformer

从NLP Transformer中借鉴而来的视觉 Transformer 在使用大规模监督数据或某种形式的协同监督&#xff08;例如教师网络&#xff09;进行预训练时已被证明是有效的。这些经过监督预训练的视觉Transformer在下游任务中通过最小的改动就能取得出色的结果。 随着监督预训练&#x…

告别盲目推广!Xinstall二维码携参技术,让App运营更精准高效

在移动互联网时代&#xff0c;App推广和运营已成为每个开发者必须面对的重要任务。然而&#xff0c;如何精准地定位目标用户&#xff0c;提高转化率和用户留存率&#xff0c;成为了摆在每个开发者面前的难题。今天&#xff0c;我们就来谈谈如何通过Xinstall二维码携参技术&…

AzSubEnum:针对Azure服务的子域名枚举查询工具

关于AzSubEnum AzSubEnum是一款专门为Azure服务量身定制的子域名枚举查询工具&#xff0c;该工具旨在帮助广大研究人员仔细搜索和识别与各种Azure服务相关的子域名信息。 通过结合查询技术和语句&#xff0c;AzSubEnum能够深入分析Azure的域名架构&#xff0c;并系统地探测和收…

Python使用trule库画小猪佩奇

在这篇博客中&#xff0c;我将向大家展示如何使用Python的Turtle模块来绘制一个可爱的小猪佩奇。这个项目不仅可以帮助你熟悉Turtle绘图&#xff0c;还可以让你在编程的过程中享受到绘画的乐趣。 并非百分百原创&#xff0c;有部分参考其他博主&#xff0c;请理性对待&#xff…

小学数学出题器-Word插件-大珩助手

Word大珩助手是一款功能丰富的Office Word插件&#xff0c;旨在提高用户在处理文档时的效率。它具有多种实用的功能&#xff0c;能够帮助用户轻松修改、优化和管理Word文件&#xff0c;从而打造出专业而精美的文档。 【新功能】小学数学出题器 1、实现了难度设定&#xff1b;…

Vue.js 中的登录状态管理:使用计算属性避免重复登录20240531

Vue.js 中的登录状态管理&#xff1a;使用计算属性避免重复登录 在前端开发中&#xff0c;用户的登录状态管理是一个非常常见的需求。我们希望用户在成功登录后&#xff0c;即使刷新页面&#xff0c;也能够保持登录状态&#xff0c;而不需要再次登录。在 Vue.js 中&#xff0c…

MySQL之创建高性能的索引(九)

创建高性能的索引 使用索引扫描来做排序 MySQL有两种方式可以生成有序的结果:通过排序操作&#xff1b;或者按索引顺序扫描(MySQL有两种排序算法)&#xff1b;如果EXPLAIN出来的type列的值为"index"&#xff0c;则说明使用了索引扫描来做排序(不要和Extra列的"…

怎么控制员工电脑的文件外发,六个控制文件外发的小窍门你必须了解

控制员工电脑的文件外发是企业信息安全管理中的重要环节&#xff0c;旨在防止敏感数据泄露、保护知识产权和维护商业秘密。 企业可以通过多种技术和管理措施相结合的方式来达到这一目的&#xff0c;确保既有效控制文件外发风险&#xff0c;又不影响正常的业务运作和员工工作效…

排序题目:删除某些元素后的数组均值

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;删除某些元素后的数组均值 出处&#xff1a;1619. 删除某些元素后的数组均值 难度 2 级 题目描述 要求 给定一个整数数组 arr \texttt{arr} arr&…

文献阅读:GCNG:用于从空间转录组数据推断基因相互作用的图卷积网络

文献介绍 「文献题目」 GCNG: graph convolutional networks for inferring gene interaction from spatial transcriptomics data 「研究团队」 Ziv Bar-Joseph&#xff08;美国卡内基梅隆大学&#xff09; 「发表时间」 2020-12-10 「发表期刊」 Genome Biology 「影响因子…

python 贪心算法(Greedy Algo)

贪婪是一种算法范式&#xff0c;它逐步构建解决方案&#xff0c;始终选择提供最明显和直接收益的下一个部分。贪婪算法用于解决优化问题。 如果问题具有以下属性&#xff0c;则可以使用贪心法解决优化问题&#xff1a; 每一步&#xff0c;我们都可以做出当前看来最好的选择&…

Python模块之Pandas(三)-- DataFrame 查看形状和部分数据

查看数据框的形状&#xff1a; import pandas as pd data pd.read_csv("D:/my_data/data1.csv")print(data的形状为:, data.shape) 查看数据前10行&#xff1a; data.head(10) #查看数据前10行 查看数据后10行&#xff1a; data.tail(10) 查看数据某几列/某几…

3d网渲100比本地渲染快吗?渲染100邀请码1a12

3D网渲是一种基于云计算的技术&#xff0c;它将渲染工作交由云端进行&#xff0c;以网渲平台渲染100为例&#xff0c;比起本地渲染&#xff0c;它有以下一些优势。 1、本地渲染受硬件限制&#xff0c;只能一台电脑渲染一张图&#xff0c;而渲染100有充足的服务器数量&#xf…