当前位置: 首页 > news >正文

[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {console.log('current', (e.target as HTMLElement).nodeName);};

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequestWebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关文章:

[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了 如果想知道点击的是什么元素 ,打印他的nodename就行了 不过得断言为html元素才行 const handleClick (e: React.MouseEvent<HTMLDivElement, MouseEvent>) > {console.log(current, (e.target as HTMLElement).nodeName);}; 为什么…...

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之9 重新开始 之2

本文要点 对程序设计而言&#xff1a;前者基于一个自上而下的 分类体系--&#xff08;生物遗传基因&#xff09;&#xff0c;后者者需要一个收集差异的自下而上的差异继承路径--&#xff08;系统继承源流&#xff09; 就是 广义和狭义 分类学。 共性对齐 和 差异收集 正是两者…...

【从零开始】11. LLaMA-Factory 微调 Qwen 模型(番外篇)

书接上回&#xff0c;在完成了 RAGChecker 测试后&#xff0c;离 RAG 应用真正发布还差最后一步 - 基础信息指令微调。考虑到模型还是需要具备一定程度的“自我认知”&#xff0c;因此需要将公司信息“嵌入”到模型里面的。为此&#xff0c;我选择了 LLaMA-Factory&#xff08;…...

WPF使用ContentControl控件实现区域导航,并使用Prism依赖注入优化

背景&#xff1a;使用ContentControl控件实现区域导航是有Mvvm框架的WPF都能使用的&#xff0c;不限于Prism 主要是将ContenControl控件的Content内容在ViewModel中切换成不同的用户控件 下面是MainViewModel&#xff1a; private object body;public object Body {get { retu…...

JavaWeb——MySQL-DML(1/3)-添加数据insert(DML 操作概述、INSERT 语句插入数据、语句演示、总结)

目录 DML 操作概述 INSERT 语句插入数据 INSERT 语句基础语法 INSERT 语句演示 注意事项 总结 DML 操作概述 DML 简介 DML&#xff08;Data Manipulation Language&#xff09;即数据操作语言&#xff0c;用于对数据库表中的数据进行增删改操作&#xff0c;包括添加数据&…...

经验证:将数据从索尼传输到Android的 4 种方法

概括 像Android Galaxy S20 这样的新型Android智能手机很酷&#xff0c;但除了将数据从索尼传输到Android之外。众所周知&#xff0c;旧的索尼手机上存储着大量的文件&#xff0c;因此将数据从旧的索尼手机传输到新的Android手机非常重要。为了解决这个问题&#xff0c;我们做…...

嵌入式应用实例→电子产品量产工具→UI界面的绘制和测试

前言 之前已经在博文https://blog.csdn.net/wenhao_ir/article/details/144747714中实现了用Freetype在LCD屏上绘制字符&#xff0c;本篇博文我们利用Freetype实现UI界面的绘制。 头文件include\ui.h的分析 头文件内的代码 #ifndef _UI_H #define _UI_H#include <common…...

如何删除 Docker 中的悬虚镜像?

在 Docker 中&#xff0c;悬虚镜像&#xff08;Dangling Images&#xff09;是指那些没有 标签 且没有被任何容器使用的镜像。这些镜像通常是由于构建过程中生成的中间层镜像或未正确清理的镜像残留。删除悬虚镜像可以释放磁盘空间并保持 Docker 环境的整洁。 1. 列出悬虚镜像…...

el-table树形懒加载展开改为点击行展开

思路&#xff1a;获取el-table中小箭头&#xff0c;然后调它的click事件&#xff01; <el-tablerow-click"getOpenDetail":row-class-name"tableRowClassName">// 点击当前行展开节点getOpenDetail(row, column, event) {// 如果是叶子节点或点击的是…...

【Ubuntu】Ubuntu server 18.04 搭建Slurm并行计算环境(包含NFS)

Ubuntu server 18.04 搭建Slurm并行计算环境&#xff08;包含NFS&#xff09; 一、Munge 认证模块 1.1、安装 munge 主节点和子节点都安装munge #安装 sudo apt update && sudo apt install munge libmunge-dev#设置开机启动 sudo systemctl enable munge sudo syste…...

高并发场景下的秒杀系统架构设计与实现

引言 秒杀系统是一种高并发场景的典型应用&#xff0c;广泛存在于电商平台、抢票系统和促销活动中。秒杀活动的特点是短时间内吸引大量用户同时访问并尝试抢购商品&#xff0c;这对系统的高并发处理能力、稳定性和用户体验提出了极高的要求。 在秒杀系统中&#xff0c;常见的…...

搭建开源版Ceph分布式存储

系统&#xff1a;Rocky8.6 三台2H4G 三块10G的硬盘的虚拟机 node1 192.168.2.101 node2 192.168.2.102 node3 192.168.2.103 三台虚拟机环境准备 1、配置主机名和IP的映射关系 2、关闭selinux和firewalld防火墙 3、配置时间同步且所有节点chronyd服务开机自启 1、配置主机名和…...

QT----------多媒体

实现思路 多媒体模块功能概述&#xff1a; QT 的多媒体模块提供了丰富的功能&#xff0c;包括音频播放、录制、视频播放和摄像头操作等。 播放音频&#xff1a; 使用 QMediaPlayer 播放完整的音频文件。使用 QSoundEffect 播放简短的音效文件。 录制音频&#xff1a; 使用 QMe…...

选择器(结构伪类选择器,伪元素选择器),PxCook软件,盒子模型

结构为类选择器 伪元素选择器 PxCook 盒子模型 (内外边距&#xff0c;边框&#xff09; 内外边距合并&#xff0c;塌陷问题 元素溢出 圆角 阴影: 模糊半径&#xff1a;越大越模糊&#xff0c;也就是越柔和 案例一&#xff1a;产品卡片 <!DOCTYPE html> <html lang&q…...

Vue2/Vue3 响应式原理对比指南

Vue2/Vue3 响应式原理对比指南 1. 基本实现原理 1.1 Vue2 响应式实现 (Object.defineProperty) // Vue2 响应式核心实现 function defineReactive(obj, key, val) {// 递归处理嵌套对象observe(val);const dep new Dep();Object.defineProperty(obj, key, {get() {// 依赖收…...

FastExcel:超越EasyExcel的新一代Excel处理工具

简介 FastExcel是由原EasyExcel作者在阿里巴巴宣布停止维护EasyExcel之后推出的升级版框架。它继承了EasyExcel的所有优点&#xff0c;并且在性能和功能上进行了显著的提升和创新。 FastExcel的特点 高性能读写&#xff1a;FastExcel专注于性能优化&#xff0c;能够高效处理…...

大模型系列17-RAGFlow搭建本地知识库

大模型系列17-RAGFlow搭建本地知识库 安装ollama安装open-wehui安装并运行ragflowRAG&#xff08;检索、增强、生成&#xff09;RAG是什么RAG三过程RAG问答系统构建步骤向量库构建检索模块生成模块 RAG解决LLM的痛点 使用ragflow访问ragflow配置ollama模型添加Embedding模型添加…...

常用的mac软件下载地址

目录 iRightMouse Pro&#xff08;超级右键&#xff09; xmind&#xff08;思维导图&#xff09; Parallels Desktop&#xff08;虚拟机工具&#xff09; Paste&#xff08;跨平台复制粘贴&#xff09; AutoSwitchInput Pro&#xff08;自动切换输入法&#xff09; Snipa…...

基于51单片机和16X16LED点阵屏(74HC138和74HC595驱动)的小游戏《贪吃蛇》

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、定时器02、自制八位独立按键3、点阵屏模块 四、主函数总结 系列文章目录 前言 《贪吃蛇》&#xff0c;一款经典的、怀旧的小游戏&#xff0c;单片机入门必写程序。 以《贪吃蛇》为载体&#xff0c;熟悉各种屏…...

python中常用的内置函数介绍

python中常用的内置函数介绍 1. print()2. len()3. type()4. str(), int(), float()5. list(), tuple(), set(), dict()6. range()7. sum()8. max(), min()9. sorted()10. zip()11. enumerate()12. map()13. filter()14. any(), all()15. abs()16. pow()17. round()18. ord(), …...

ARM PMU外部接口与性能监控寄存器详解

1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块&#xff0c;它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中&#xff0c;PMU不仅可以通过系统寄存器访问&#xff0c;还提供了标准化的外部…...

AArch64内存管理:MAIR_EL3寄存器详解与应用

1. AArch64内存管理基础与MAIR_EL3寄存器定位 在Armv8-A/v9-A架构中&#xff0c;内存管理单元(MMU)通过多级页表实现虚拟地址到物理地址的转换。当处理器执行内存访问时&#xff0c;MMU会遍历页表条目(Translation Table Entry)&#xff0c;其中包含两个关键信息&#xff1a;目…...

SSE 基础知识

SSE 基础知识 一、概念定义 SSE 全称 Server-Sent Events&#xff0c;是基于HTTP协议的服务器单向数据推送技术。 建立一次长连接后&#xff0c;服务端可主动持续向前端推送数据&#xff0c;无需客户端反复轮询请求。 二、核心特点 单向通信&#xff1a;仅服务器 → 客户端发送…...

PDF 可视化签名盖章页技术解析

本文是我在设备检测系统项目开发中,无设备检测的技术实现备忘录,记载实现过程。 本文以 PC 端页面 sign-pdf.vue 为主线,说明「无设备报检」在报告审批环节如何通过前后端协作,完成报告/记录 PDF 上的签名、印章、报告编号拖放定位,并在审批通过后由后端合并生成带签章的正…...

Burp Suite深度解析:从流量抓包到业务逻辑漏洞挖掘

1. 这不是“学个插件”——Burp Suite 是渗透测试的呼吸系统 很多人第一次听说 Burp Suite&#xff0c;是在某篇“三步拿下登录框”的速成教程里&#xff1a;装好Java、拖进浏览器代理、点几下Repeater就弹出密码明文。结果真去测一个中型SaaS后台&#xff0c;不到十分钟就卡在…...

基于MAX78000的医疗紧急呼叫系统:边缘AI与低功耗设计实战

1. 项目概述与核心价值大家好&#xff0c;我是Victor Hugo&#xff0c;一名电子工程师。今天我想和大家分享一个我最近完成并参与设计竞赛的项目&#xff1a;一个基于MAX78000 FTHR开发板的医疗紧急呼叫辅助系统。这个项目的核心&#xff0c;不是从零开始造一个新轮子&#xff…...

Unity项目DrawCall降不下来?试试用Mesh Baker合并贴图集,保姆级图文教程

Unity性能优化实战&#xff1a;用Mesh Baker合并贴图集降低DrawCall全流程解析当你的Unity项目帧率开始卡顿&#xff0c;Profiler里DrawCall数字居高不下时&#xff0c;合并贴图集往往是解决问题的关键一步。本文将以一个实际项目为例&#xff0c;带你从零开始使用Mesh Baker的…...

【DeepSeek灰度发布黄金法则】:20年SRE亲授7步零故障上线实战框架

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek灰度发布策略全景图 DeepSeek模型服务的灰度发布并非简单的流量切分&#xff0c;而是一套融合可观测性、渐进式验证与多维熔断机制的工程化闭环体系。其核心目标是在保障线上推理稳定性的同时&…...

Burp抓包失败的五大隐形墙与HTTPS解密断裂点排查指南

1. 这不是Burp用得不对&#xff0c;是环境链路断在了你没看见的地方“Burp抓不到包”——这句话我过去三年里听开发、测试、刚转安全的新人说了不下两百遍。但真正打开Burp一看&#xff0c;Proxy标签页里空空如也&#xff0c;连个localhost:8080的请求都没有&#xff0c;十有八…...

完整指南:如何在5分钟内快速上手BioAge生物年龄计算工具包

完整指南&#xff1a;如何在5分钟内快速上手BioAge生物年龄计算工具包 【免费下载链接】BioAge Biological Age Calculations Using Several Biomarker Algorithms 项目地址: https://gitcode.com/gh_mirrors/bi/BioAge BioAge生物年龄计算工具包是一款基于R语言开发的强…...