首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法不通过点击来关闭antd下拉菜单?

在antd中,可以通过编程的方式来关闭下拉菜单,而不是通过点击。具体的方法是使用visible属性来控制下拉菜单的显示与隐藏。

首先,你需要在组件的state中添加一个visible属性,并将其初始值设置为false。然后,在需要关闭下拉菜单的地方,通过修改visible属性的值来控制下拉菜单的显示与隐藏。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { Button, Menu } from 'antd';

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  const handleButtonClick = () => {
    setVisible(!visible);
  };

  const handleMenuClick = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={handleButtonClick}>点击我</Button>
      <Menu onClick={handleMenuClick} visible={visible}>
        <Menu.Item key="1">菜单项1</Menu.Item>
        <Menu.Item key="2">菜单项2</Menu.Item>
        <Menu.Item key="3">菜单项3</Menu.Item>
      </Menu>
    </div>
  );
};

export default MyComponent;

在上面的代码中,我们使用useState来定义了一个visible状态,并通过setVisible函数来修改该状态的值。当点击按钮时,会调用handleButtonClick函数,该函数会将visible的值取反,从而控制下拉菜单的显示与隐藏。同时,我们还为Menu组件添加了onClick事件,当点击菜单项时,会调用handleMenuClick函数,该函数会将visible的值设置为false,从而关闭下拉菜单。

这种方式可以实现不通过点击来关闭antd下拉菜单的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何为antd的Tree组件添加右键菜单

最近在用 antd v4 的 Tree 组件时,想给 Tree 组件添加一个右键菜单功能,最初的想法是看看 antd 官方有没有提供现成的方法,遗憾的是,官方并没有给出一个统一的方法,只是建议大家先使用社区提供的组件...方法一 思路是使用 antd 提供的 Dropdown 组件和 Menu 组件,结合 Tree 组件提供的 titleRender 属性实现,核心代码如下: import { Tree, Dropdown...,属性值包括:click、hover 和 contextMenu,其中 contextMenu 表示右键触发下拉菜单, overlay 传入下拉菜单。...tabindex="0" ,表示元素是可聚焦的,并且可以通过键盘导航聚焦到该元素,它的相对顺序是当前处于的 DOM 结构决定的。...当鼠标右键点击菜单的时候,会记录下当前右键事件的坐标值,利用这个坐标就可以定位右键菜单的坐标,通过 css 属性设置,将菜单设置为可视,并且触发div容器的 focus 事件。

4K30

【通用组件】高效生成 antd Table 组件的操作列

源码 TableOption 组件源码 背景 业务中台重构后,新的框架基于 antd 整套生态,采用声明式的设计思路,可以通过 JSON 的方式快速构建 CRUD 页面的查询表单、Table 表格、新增编辑表单...但每次定义 Table 的操作列时,都要写一大堆重复的“模板代码”,一效率低,二不便于通过交互细节,故对这个场景进行抽象封装,整理成一个通过组件 如上图,没有封装组件之前,每次都要重复写以下类似的... ); }, }, 复制代码 而且另外一个比较大的问题是交互不统一,比如,上面点击...loading 效果,影响用户体验 需求分析 基于目前的业务场景,对于这个通过组件,归纳一下几点需求: 操作列只放三种类型的按钮:普通 text button 、二次确认 Popconfirm 按钮、下拉菜单...button,如果有异步操作,要等 loading 完再关闭下拉菜单 预留鉴权的接口,通过权限控制按钮的显示与否 核心组件 ButtonExt 对 antd 的按钮进行扩展,增加 onAsyncClick

1.9K00
  • 精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

    该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样,通过引入组件标签调用。...导航型组件: 比如面包屑Breadcrumb, 下拉菜单Dropdown, 菜单Menu等. 数据录入型组件: 比如form表单, Switch开关, Upload文件上传等....并且我们都知道,antd或者element这种组件库,会自带一些主题状态,提高用户的使用效率,比如会有success(成功状态),warning(警告状态),error(错误状态),info(通知状态...能自定义关闭图标 可以手动选择通知窗类型 能自定义通知框的偏移量 能设置通知框的信息和提示文本 能自定义通知框的Icon 通知框点击时提供回调函数 通知框关闭时提供回调函数 能手动销毁通知框 需求收集好之后...string 当前通知唯一标志 * @param {message} string|ReactNode 通知提醒标题,必选 * @param {onClose} func 点击默认关闭按钮时触发的回调函数

    2K10

    精通ReactVue系列之实现一个全局提示(Message)组件

    导航型组件: 比如面包屑Breadcrumb, 下拉菜单Dropdown, 菜单Menu等. 数据录入型组件: 比如form表单, Switch开关, Upload文件上传等....并且我们都知道,antd或者element这种组件库,会自带一些主题状态,提高用户的使用效率,比如会有success(成功状态),warning(警告状态),error(错误状态),info(通知状态...能自定义全局提示的Icon 全局提示点击时提供回调函数 全局提示关闭时提供回调函数 能手动销毁通知框 需求收集好之后,作为一个有追求的程序员, 会得出如下线框图: ?...string 当前提示唯一标志 * @param {content} string|ReactNode 提示标题,必选 * @param {onClose} func 点击默认关闭按钮时触发的回调函数...antd同样的方式会这么调用: // antd Notification.info({//...})

    3.4K10

    用 Peer.js 愉快上手 P2P 通信

    WebRTC 是什么 WebRTC(Web Real Time Communication)也叫做 网络实时通信,它可以 允许网页应用不通过中间服务器就能互相直接传输任意数据,比如视频流、音频流、文件流...下面就用它实现一个视频聊天室吧。 文章代码都放在 Github 项目[1] 上了,你也可以点击 预览链接[2] 查看。...为了界面更好看,这里可以使用 antd 作为 UI 库: npm i antd 最后在 index.js 中引入 CSS: import 'antd/dist/antd.css' 布局 安装 peer.js...第二步,将 B 页面(接收方)的 peer id 填在 A 页面(发起方)的输入框内,点击【视频通话】。...第三步,在 B 页面(接收方)点击 confirm 的【确认】: 然后就可以完成视频通话啦: 视频效果 总结 总的来说,使用 Peer.js 做端对端的信息互传还是比较方便的。

    94110

    原创干货:前端单元测试Jest零基础入门教学

    看代码是否按预期运行 ---- 这里为了降低文章篇幅,对于初学者更友好,于是这里使用我开源的通用脚手架,集成TypeScript+JavaScript混合开发,Jest框架,测试React组件、Enzyme、dva、Antd...因为里面没有写任何单元测试代码,此时我们根据脚手架的实际文件编写单元测试代码 import App from '.....console.log('App-mountComponent test function stop --success '); }); yarn test 启动结果 发现报错,测试没有通过,那么我们要想办法让它测试通过...然后等部分代码跑完后,再生成一次快照,跟之前的快照进行对比,这样就能判断你中间的这部分代码有没有影响UI,这样能确定有没有BUG的出现 ---- 页面快照: import App from '.....expect(wrapper).toMatchSnapshot() 这行代码,帮我们在test文件夹下生成了__snapshots__文件夹 后面测试代码中如果有操作改变了这个页面,那么就会报错,单元测试不通过

    1.1K20

    如何关闭 YouTube 上的受限模式

    介绍YouTube 通过多个视频教授课程(教程)并为您提供无限的娱乐。...那么有没有万无一失的方法解决如何关闭 YouTube 年龄限制的问题呢?让我们深入了解如何关闭 YouTube 上的限制模式并探索该平台领域的广阔宇宙。...2.点击屏幕顶部的用户个人资料照片。3.在下拉菜单中选择管理您的 Google 帐户。4.点击个人信息选项卡。5.在“基本信息”下将您的生日更新为正确的日期,然后选择“保存”。...选择“设置”并打开“帐户设置”下拉菜单。现在打开/关闭限制模式。蓝色开关表示打开,而灰色按钮表示限制模式关闭。仅当您在移动应用和手机浏览器中使用相同的 YouTube 帐户时才使用此方法。...点击下拉菜单并选择受限模式。弹出一个框后,查看底部并关闭“受限模式”。一旦关闭,蓝色开关将变为灰色。您在带有过滤器的桌面或网络上关闭 YouTube 的受限模式时可能会遇到问题。

    4.3K20

    《精通reactvue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件

    可以配置自定义关闭图标 配置关闭时是否销毁Modal里的子元素 自定义模态框底部内容 控制是否支持键盘esc关闭 控制是否展示遮罩 控制点击蒙层是否允许关闭 自定义遮罩样式 自定义标题 控制对话框是否可见...去除mask遮罩 2.3 实现visible(带有弹窗出来和隐藏的动画animation) 熟悉antd或者element的朋友都知道,visible用来控制modal的显示和隐藏,我们这里也实现同样的功能...要想实现该功能,我们需要处理如下几个事件: 当点击关闭按钮时,根据destroyOnClose销毁子组件 当点击确认按钮时,根据destroyOnClose销毁子组件 当visible为true,根据destroyOnClose...2.7 实现键盘按键ESC时关闭模态框(Modal) 为了更好的用户体检,笔者的Modal组件支持键盘事件,我们都知道键盘的ESC对应的事件码为27,那么我们就能根据这个原理实现键盘按键ESC时关闭模态框...虽然这样已经基本实现了键盘关闭的功能,但是这样的代码明显不够优雅,所以我们完善以下,我们可以将键盘关闭的方法抽离出来,然后在useEffect的第一个回调函数中返回另一个函数(该函数里是组件卸载前的钩子

    2.6K11

    Tomcat安装与启动和配置

    ,shutdown关闭; 配置 点击 conf(配置)文件,找到 server.xml(服务器核心配置文件) 配置启动的端口号(默认); <Connector port="8080" protocol..." redirectPort="8443" /> 环境变量 Tomcat在运行时必须指定使用的JDK,由于我们可能下载了多个JDK版本,所以使用Tomcat前,必须配置好 JAVA_HOME,指定我们需要使用哪一个...4、配置项目访问路径,如果没有没有自动选择,点击configuration,点击+号,在tomcat选择自己的tomcat目录即可; 选择"Local",则在"Application Server"下拉菜单中...选择"Remote",则在"Application Server"下拉菜单中,选择"Configure..."...5、配置部署路径,在"Deployment"选项卡中,点击"+"按钮添加你的项目的构建输出,通常是一个war文件。选择你的项目的构建输出,并点击"OK"保存配置。

    5.5K21

    《精通reactvue组件设计》之实现一个健壮的警告提示(Alert)组件

    前言 本文是笔者写组件设计的第七篇文章, 今天带大家实现一个自带主题且可关闭的Alert组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈....导航型组件: 比如面包屑Breadcrumb, 下拉菜单Dropdown, 菜单Menu等. 数据录入型组件: 比如form表单, Switch开关, Upload文件上传等....其他业务类型 所以我们在设计组件系统的时候可以参考如上分类去设计,该分类也是antd, element, zend等主流UI库的分类方式....Alert,onClose是对外暴露的关闭时的方法, 因为没必要也不需要向外暴露属性让Alert关闭, 所以最好的方式是在组件内部实现, 我们会通过useState这个钩子来处理,代码如下: function...closeText : 'x' } } : null } 通过控制visible控制Alert的出现和消失, 并且当点击关闭按钮时能调用外部暴露的onClose

    99620

    Nest + Sharp 实现了一个 gif 压缩工具,帮我省不少钱

    不知道大家有没有场景会需要 GIF 压缩,我是经常会用到。 因为公众号的图片最大支持 10M,但是我录制出来的 GIF 经常超过 10M。...但没办法,这对我是刚需,总不能不发文章了吧。 于是去年年底我就开了一年的会员: 但最近发现有 npm 包可以做这个,没必要买这种网站的会员。。。...: npm install --save antd 修改下 App.js import { DatePicker } from 'antd'; function App() { return (...: npm install --save sharp 修改下 compression 方法: 调用 sharp 压缩 gif 图片,并注入 response 对象返回文件下载响应: @Get('...在点击登录的时候打印下表单的值和 filePath。 我们试试看: 3 个参数都拿到了,然后调用下压缩接口。

    32320

    搜索引擎looka_Alook浏览器使用方法教程

    搞定办法:IE下选择工具-internet选项-连接-局域网设置-取消自动检测。 2....您可以执行以下操作:转到首页】搞定方案:工具-internet选项-高级中关闭 【启用崩溃自动恢复】 重新启动ie后即开。 4....打开网页一直刷新-失败-刷新,无限循环搞定办法:工具-internet选项-高级-禁用脚本调试。 6. IE 习惯性停止工作或崩溃。搞定办法:工具-管理加载项,一一禁用排除以找到某个插件的问题。...点击360安全浏览器顶部菜单,可以看到一个剪刀形状的功能扩展的三角形的下拉菜单,在下拉菜单中显示有截屏的快捷按钮,还有隐藏浏览器窗口截屏和将网页保存成图片,还有打开WINDOWS画图板的功能选项。...我们在360安全浏览器截图扩展的下拉菜单当中,选择点击将网页保存成图片的功能选项,注意选择点击剪刀形状旁边的三角形的下拉菜单按钮。

    2.6K20

    串口助手(简洁版)上位机软件零基础教程( C# + visual studio2017 )(一)

    像windows普通窗口一样,可以拖动,点击右上方关闭按钮可以关闭并退出调试。 同时窗体也可以用鼠标对准其边线,调整窗口的大小,以满足用户的需求,试一试!!...在 Items 属性栏中,可添加组合框下拉菜单内容。 注:本次串口助手软件 端口组合框 会在程序中添加下拉菜单内容,不用在属性栏中手动添加。...可在文本框的属性窗口中,更改为多行显示(multiline 栏)(否则无法纵向拉伸);纵向拓展或横向拓展或双向拓展(Scrollbars栏)(文本框边上有没有拖动条) 第六,添加串口控件 。...至此,可视化窗体已经做完了,我们点击 “”启动按钮“进行测试,查看具体的效果,发现按钮可以点击,组合框可以下拉,文本框可以输入字符,两组单选按钮各自工作正常。。。。。。关闭窗口。...后面我们将进入程序部分的编写,就比较难了,不过没关系,一步一步。 未完待更。。。。。。

    6.8K21

    antd mobile 作者教你写 React 受控组件和非受控组件

    在这篇文章,我们将一起聊聊怎么去让一个组件像 antd 的 Input 组件这样,既支持受控模式,又支持非受控模式。...让我们从最简单和基础的部分出发,一点点分析和演进,看看会遇到哪些问题,又如何一步步解决。 什么是受控组件?什么又是非受控组件?...那有没有办法在 Child 组件的 render 阶段就直接更新 value 状态呢? 并不可以,React 不允许我们在 render 过程中调用 setState。...对用户来说,点击同一个 Tab 并没有触发切换,也因此不应该触发 onChange 事件,所以我们还需要额外的增加一点判断,解决这个 bug: 在 antd-mobile 中,我们也有一个这样的 usePropsValue...“如果觉得写得还不错,麻烦去给 antd mobile[5] 点个 star 吧!

    1.8K10

    ETL详细安装教程(常见错误)

    ,选择如下内容; ③ 选择“系统权限”,点击下拉菜单,选择如下内容,最后点击“应用”即可; 接着创建“bi_resource”用户: ① 选择“一般”,填写如下内容; ② 选择...“角色权限”,点击下拉菜单,选择如下内容; ③ 选择“系统权限”,点击下拉菜单,选择如下内容,最后点击“应用”即可; 最后我们可以看到,这两个用户已经创建好: 2、安装server服务端...按照如下步骤一步步进行配置,红色方框中都是需要我们按照自己的电脑配置,进行操作的; ① 复制你第一步创建的BI_DOMAIN用户; ② 找到你电脑的host_name名。...19)当出现如下界面后,将“代码页”修改为和我图中一样的,点击确定; 20)当出现如下界面后,需要我们手动启用集成服务; “无法启用服务 BI_ODS:SF_34004-服务初始化失败”的解决办法。...解决办法如下: ① 先把之前创建的两个bi_etl和bi_ods删掉; ② 在windows中,关闭informatica服务; ③ 删除第一步创建的bi_resource用户; ④ 在windows中

    98210

    使用antd表格组件实现日程表

    日程内容单元格的内容如果为空时,需要将单元格进行合并,显示一个增加图标,点击增加图标后,打开系统的弹窗进行增加操作,操作完成后,渲染内容至刚才点击的单元格。...最后实现的效果如下所示,实现代码请移步:react-antd-schedule/index.html image-20201119175256753 动态增加列 这个日程表用户可以通过点增加图标增加一列日程...但点击单元格做完对应的操作后,弹窗关闭,此时我们需要在当前页面监听到子窗口关闭,然后向后台请求接口重新获取数据渲染页面,在打开的弹窗中提供了一个方法,可以调用父页面的方法,但是这个方法必须写在hooks...此时,问题就产生了,如果写在hooks外面,那么就无法拿到antd表格内部的数据做到页面重新渲染,经过一番思考后,想到了可以Proxy实现,当被代理的对象发生改变时,就触发hooks里的代理函数,实现代码如下...经过一番求助后,得到了三个解决方案: 使用immer解决这个问题,经过折腾后还是没实现,他返回的数组是只读的,antd无法对数据进行操作,故放弃。

    3.7K20

    Ant Design的DatePicker日期组件不可选日期实现,让New Bing优化代码太棒了

    DatePicker 是 antd 的日期选择器组件,支持弹出的日历面板,点击选择或输入日期。...本文将介绍如何使用 antd 的 DatePicker 组件设置不可选日期:根据 antd 官方示例实现后,让 New Bing 新必应优化代码,结果让我很惊喜。...> event && setValue(event)} />; }; export default DateTimePicker; 我觉得这样写看上去有点复杂,就把方法部分代码发给必应,让必应看一下,有没有可优化的地方...检查你的逻辑是否可以简化,比如使用 isBefore 和 isAfter 方法代替比较运算符。...format={(date) => date.format('YYYY年MM月DD日 HH时mm分ss秒')} />; 这里我们使用了一个函数作为 format 属性的值,使用了 date.format 方法格式化日期

    1.8K20

    启动计算机配置windows7,win7开机显示准备配置Windows请勿关闭计算机 然后无限重启怎么回事…

    win7开机显示准备配置Windows请勿关闭计算机 然后无限重启怎么回事 1、原因 死机了。 2、解决方法 1)在win7桌面的任务栏右下角找到一个旗子图标,右击弹出对话框,点击“打开操作中心”。...3)页面跳转,在其中找到“重要更新”字样,下方有个下拉按钮,点击它,在下拉菜单中选择“从不检查更新”,然后单击确定就可以了。当然,还有其它方法,下面的第4步骤开始是给大家介绍另外一种途径设置。...4)在win7桌面右击,弹出右下拉菜单,在其中找到“个性化”,并单击它。 5)弹出一个页面,在该页面中的左边一栏中找到“控制面板主页”,并单击它。 6)页面跳转,然后找到并单击“系统和安全”选项。...windows update然后重新启动 如果还是不行 继续F8安全模式 删除最近更新的几个安全补丁然后重新启动 如果依然还是不行 就只有看你有没有备份 只有考虑恢复系统了. windows自动更新之后...windows update然后重新启动 如果还是不行 继续F8安全模式 删除最近更新的几个安全补丁然后重新启动 如果依然还是不行 就只有看你有没有备份 只有考虑恢复系统了. windows自动更新之后

    2.4K20

    【学习】Excel设置【任意级数】的【下拉菜单】框!

    在日常生活中,我们都可能要用到下拉菜单栏,高效的完全工作,在论坛已经有好多教程提到了如何去设置二级、三级的下拉菜单,但是有没有方法去设置更多的呢???...比如四级下拉菜单、五级下拉菜单等等,甚至是任意级的下拉菜单呢??答案是有的。现在我们一起交流一下。 设置好相关数据,仅为举例说明,具体设置按实际情况而定。...点击目标单元格B3,设置数据有效性。(直接点击选取相关区域数据如:A、B、C) ? 2 C* c5 Y! ^, a" M7 Y7 ~4 n 效果演示: ? * G7 R4 F+ L, V!...d q; k, b% m0 Y 点击单元格C3,设置数据有效性时, 输入公式“=OFFSET($D$19:$L$19,MATCH($C$3,$C$19:$C$56,0)-1,0,1,SUMIF($C$19...x+ B' `7 S) C2 S9 v 同理,设置《四级下拉菜单》,只须修改相应单元格即可。如图操作。 ? 效果图示 ? 5级下拉菜单举例说明:(仅以A311为例,其他相同。)

    1.6K41
    领券