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

2024-06-01 10:04
文章标签 下拉菜单 dropdown react 监听 键盘 选中 功能 实现 javascript frontend

本文主要是介绍实现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;   }  }}

这篇关于实现Dropdown下拉菜单监听键盘上下键选中功能-React的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1020691。

相关文章

C++对象布局及多态实现探索之内存布局（整理的很多链接）

C++对象布局及多态实现探索之内存布局（整理的很多链接）

本文通过观察对象的内存布局，跟踪函数调用的汇编代码。分析了C++对象内存的布局情况，虚函数的执行方式，以及虚继承，等等 文章链接：http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候，你会无止境地与内存管理打交道。 文章链接：http://dev.yesky
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
通过SSH隧道实现通过远程服务器上外网

通过SSH隧道实现通过远程服务器上外网

搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效，查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务，隧道开机启动
阅读更多...
JavaScript全屏，监听页面是否全屏

JavaScript全屏，监听页面是否全屏

在JavaScript中，直接监听浏览器是否进入全屏模式并不直接支持，因为全屏API主要是关于请求和退出全屏模式的，而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是，你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。 以下是一个基本的示例，展示了如何使用全屏API来请求全屏模式，并在请求成功或失败时更新一个状态变量： javascriptlet isInFullscreen =
阅读更多...
时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测 目录 时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测基本介绍程序设计参考资料 基本介绍 MATLAB实现LSTM时间序列未来多步预测-递归预测。LSTM是一种含有LSTM区块（blocks）或其他的一种类神经网络，文献或其他资料中LSTM区块可能被描述成智能网络单元，因为
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
android 免费短信验证功能

android 免费短信验证功能

没有太复杂的使用的话，功能实现比较简单粗暴。 在www.mob.com网站中可以申请使用免费短信验证功能。 步骤： 1.注册登录。 2.选择“短信验证码SDK” 3.下载对应的sdk包，我这是选studio的。 4.从头像那进入后台并创建短信验证应用，获取到key跟secret 5.根据技术文档操作（initSDK方法写在setContentView上面） 6.关键：在有用到的Mo
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...
Android我的二维码扫描功能发展史（完整）

Android我的二维码扫描功能发展史（完整）

最近在研究下二维码扫描功能，跟据从网上查阅的资料到自己勉强已实现扫描功能来一一介绍我的二维码扫描功能实现的发展历程： 首页通过网络搜索发现做android二维码扫描功能看去都是基于google的ZXing项目开发。 2、搜索怎么使用ZXing实现自己的二维码扫描：从网上下载ZXing-2.2.zip以及core-2.2-source.jar文件，分别解压两个文件。然后把.jar解压出来的整个c
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2