react antd阻止Checkbox事件冒泡(折叠面板标题中增加复选框,阻止点击复选框折叠面板展开/折叠)

news2024/12/28 3:47:03

背景

折叠面板Collapse标题中增加复选框,点击复选框,会触发折叠面板的展开和折叠。

我们希望勾选复选框的时候,不能影响到折叠面板的展开和折叠。

最开始使用onChange自带的event来阻止事件冒泡,这种方式是无效的,代码如下:

<Checkbox
  style={{ marginRight: 5 }}
  onChange={(e) => {
    console.log('e:', e); // 虽然这里的event也具有stopPropagation方法
    e.stopPropagation(); // 这种方式是无效的
    handleClickItemCheckbox(isChecked, item.task_record_id);
  }}
  checked={isChecked}
/>

在这里插入图片描述

在这里插入图片描述

解决

监听复选框的onClick事件,用e.stopPropagation()阻止事件冒泡。

<Checkbox
  style={{ marginRight: 5 }}
  onChange={handleClickItemCheckbox(isChecked, item.task_record_id)}
  checked={isChecked}
  onClick={(e) => e.stopPropagation()} // 在这里
/>

在这里插入图片描述

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

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

相关文章

安卓应用的图标设计

参考链接&#xff1a;https://developer.android.com/studio/write/create-app-icons 安卓的图标比较复杂&#xff0c;因为有很多图标。可以用一张自己的图做图标&#xff0c;本文介绍其过程。 运行image asset studio&#xff0c;在android studio中&#xff0c;项目栏中&…

芒果在线咸鱼转转交易猫聊天客服源码

芒果在线咸鱼转转交易猫聊天客服源码是一款为咸鱼转转定制的客服系统&#xff0c;具备前后台管理功能&#xff0c;还支持咸鱼转转模板和分享图功能。本文将介绍该客服系统的安装方法&#xff0c;以及如何修改公告内容和机器人自动回复内容。

Redis异常报错出现 WRONGTYPE Operation against a key holding the wrong kind of value

操作Redis做一个查询优化的时候出现一个问题&#xff1a; org.springframework.data.redis.RedisSystemException: Error in execution; nested exception is io.lettuce.core.RedisCommandExecutionException: WRONGTYPE Operation against a key holding the wrong kind of v…

发现好工具nodepad-- 你没有看错是--

工欲善其事&#xff0c;必先利其器 这是一个使用C编写的文本编辑器Notepad--,可以支持Win/Linux/Mac平台。 他们的目标是要进行文本编辑类软件的国产可替代&#xff0c;重点在国产Uos/Linux系统、Mac 系统上发展。 一个支持windows/linux/mac的文本编辑器&#xff0c;目标是…

百家号关键词榜怎么上?排名规则是什么?

百家号关键词榜怎么上?排名规则是什么?#百家号关键词排名 #百家号v认证 #百家号代运营 #百家号排名技巧 如何利用百家号关键词排名实现“百度首页霸屏”&#xff1f;#百度霸屏技术 今天给大家介绍一下百度百家号是百度为内容创作者提供的内容发布、内容变现和粉丝管理平台。 …

统信UOS1060版本安装时选择【免费使用授权】安装的方法

1.选择界面化进行安装操作。 2.在选择授权类型中选择【免费使用授权】即可&#xff0c;根据其他提示进行选择安装目的地及根密码root密码的设置。 3.剩下的就是下一步下一步进行安装。

使用Nginx的反向代理来访问服务器例子——Nginx笔记

因为网站上的视频加载过慢&#xff0c;想使用nginx服务器实现HLS视频播放服务。顺便记录一下通过Nginx的方向代理来访问服务器。这里在原先的项目上进行改造。原先的项目已经部署在公网&#xff0c;使用tomcat服务器&#xff0c;可以直接用地址进行访问。 1.这里使用的8080端口…

2018年全国硕士研究生入学统一考试管理类专业学位联考数学试题——纯题目版

2018 级考研管理类联考数学真题 一、问题求解&#xff08;本大题共 5 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。 1.学科竞赛设一、二、三等奖&…

Flink CDC 2.4 正式发布,5分钟了解CDC 2.4新内容,新增 Vitess 数据源,更多连接器支持增量快照,升级 Debezium 版本

Flink CDC 2.4 正式发布&#xff0c;5分钟了解CDC 2.4新内容&#xff0c;新增 Vitess 数据源&#xff0c;更多连接器支持增量快照&#xff0c;升级 Debezium 版本 01. Flink CDC 简介02. Flink CDC 2.4 概览03. 详解核心特性和重要改进3.1 深入解读3.2 其他改进 04. 未来规划 来…

vue中实现el-table点选和鼠标框选功能

实现思路: 项目有两个需求,既能在el-table实现点选又能实现鼠标框选 一. 点选实现思路: 使用el-table的cellClick方法, 1.直接给点击的cell添加类名,cell.classList.add("blue-cell");然后把获取的数据存入数组, 设置样式: ::v-deep .el-table td.blue-cell {border:…

安全帽冲击试验机

一、特点&#xff1a; KDJS-20AM安全帽冲击试验机&#xff08;以下简称试验机&#xff09;适用于安全防护器材安全帽冲击吸收性能试验与安全帽耐穿刺性能试验&#xff0c;冲击和穿刺试验结果既可直接导出到电子表格&#xff0c;也可上传至管理系统。 二、主要技术参数&#x…

蓝牙资讯|未来几年物联网迅猛发展,蓝牙发挥重要作用

IDC预测&#xff0c;2023年全球物联网(IoT)支出将达到8057亿美元&#xff0c;比2022年增长10.6%。物联网生态系统的投资预计将在2026年超过1万亿美元&#xff0c;在2023-2027年的预测期内&#xff0c;复合年增长率(CAGR)为10.4%。 到2023年&#xff0c;物联网服务将成为最大的…

mysql新建用户,连接认证时报错的解决办法

问题描述 mysql新建用户后&#xff0c;修改密码&#xff0c;进行连接认证时报错 Access denied for user testuserlocalhost (using password: YES)原因分析&#xff1a; 未授权 解决方案&#xff1a; GRANT ALL ON *.* TO testuserlocalhost ;注意*.*指对所有数据库下的所…

AOSP安卓源码编译

写在前面 继上次安卓源码下载篇以后已经过了很久了 这里需要补充一些内容&#xff0c;在现在安卓源码是建议只下载自己需要的某个版本&#xff0c;这样更快 #初始化仓库,-b 指示分支&#xff0c;这里使用 android10 repo init -u https://mirrors.tuna.tsinghua.edu.cn/git/A…

Python入门教程+项目实战-14.3节-函数的可变参数

目录 14.3.1 理解可变参数 14.3.2 操作符*与** 14.3.3 对实参进行解包 14.3.4 知识要点 14.3.5 系统学习python 14.3.1 理解可变参数 函数的可变参数&#xff0c;可以从其字面意思来进行理解。“可变”是指参数的数目是变化的&#xff0c;不确定的。在Python中定义函数时…

feign与springcloud版本不匹配报错,查看springcloud组件与springcloud的匹配版本的方法

问题描述 springboot版本号是2.0.0.M3&#xff0c;springcloud的版本号是Finchley.M2 2023-06-27 00:40:02.158 ERROR 26304 --- [ restartedMain] o.s.boot.SpringApplication : Application startup failedjava.lang.IllegalStateException: Error processi…

基于c#和xml存储数据的员工管理系统

完整资料进入【数字空间】查看——baidu搜索"writebug" 项目介绍 本系统是人事管理系统&#xff0c;它主要实现管理员如何对普通用户进行授权&#xff0c;如何插入、删除一个员工的信息&#xff0c;用户如何浏览员工的所有信息&#xff0c;以及用户如何查询自己想要…

服务器数据库中了locked勒索病毒怎么办及正确的解密恢复流程是什么

在当今数字化时代&#xff0c;服务器数据库是企业重要的信息资产之一。然而&#xff0c;网络安全威胁也日益增加&#xff0c;其中之一便是勒索病毒。最近很多企业被.locked后缀勒索病毒攻击&#xff0c;导致系统的重要数据被加密&#xff0c;此次locked勒索病毒非常猖狂&#x…

运动耳机哪个好、超级适合运动的耳机推荐

无论你喜欢跑步、健身、骑行还是瑜伽等等&#xff0c;一款好的运动耳机都能够让你在运动过程中享受音乐的陪伴&#xff0c;让运动不再枯燥。运动耳机成为了运动伴侣中不可或缺的装备。今天&#xff0c;我将为大家介绍几款非常适合运动的耳机&#xff0c;并对这几款耳机进行全方…

在WSL2中安装IntelliJ IDEA开发工具

一、wsl支持图形 windows安装xming https://sourceforge.net/projects/xming/ 添加白名单 查看服务器ip ifconfig 编辑配置文件(结合自己的安装目录) ‪D:\ProgramFiles\Xming\X0.hosts 启动Xlaunh wsl 配置并验证 #b编辑配置文件 vi ~/.bashrc #末尾增加配置 export DI…