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

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

news 2026/4/2 3:05:14

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

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

不过得断言为html元素才行

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

为什么要断言是html元素?

EventTarget 是所有事件目标（包括 DOM 元素、XMLHttpRequest、WebSocket 等）的基类。并不是所有继承自 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);}; 为什么…...

编程日记 2025/1/4 4:11:46

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

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

编程日记 2025/1/4 4:03:33

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

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

编程日记 2025/1/4 4:02:32

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

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

编程日记 2025/1/4 3:54:16

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

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

编程日记 2025/1/4 3:52:13

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

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

编程日记 2025/1/4 3:51:10

嵌入式应用实例→电子产品量产工具→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…...

编程日记 2025/1/4 3:49:08

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

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

编程日记 2025/1/4 3:48:07

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

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

编程日记 2025/1/4 3:47:06

【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…...

编程日记 2025/1/4 3:43:02

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

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

编程日记 2025/1/4 3:42:00

搭建开源版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、配置主机名和…...

编程日记 2025/1/4 3:40:59

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

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

编程日记 2025/1/4 3:38:57

选择器（结构伪类选择器，伪元素选择器），PxCook软件，盒子模型

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

编程日记 2025/1/4 3:37:56

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() {// 依赖收…...

编程日记 2025/1/4 3:36:52

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

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

编程日记 2025/1/4 3:30:40

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

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

编程日记 2025/1/4 3:29:39

常用的mac软件下载地址

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

编程日记 2025/1/4 3:28:37

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

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

编程日记 2025/1/4 3:15:22

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(), …...

编程日记 2025/1/4 3:14:20

【Java低代码组件调试黄金法则】：20年架构师亲授5大高频故障定位技巧，90%开发者从未听说

第一章&#xff1a;Java低代码组件调试的本质与认知跃迁Java低代码平台并非屏蔽复杂性&#xff0c;而是将复杂性重新封装、可视化与可追溯化。调试低代码组件的本质&#xff0c;是穿透表层拖拽逻辑&#xff0c;定位其背后生成的Java字节码、Spring Bean生命周期行为、以及运行时…...

编程新知 2026/4/2 2:34:52

Ryzen SDT调试工具：解锁AMD处理器隐藏性能的终极指南

Ryzen SDT调试工具&#xff1a;解锁AMD处理器隐藏性能的终极指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://git…...

编程新知 2026/4/2 2:26:47

ChatBI怎么在BI试点中用？3个低门槛落地场景亲测有效

ChatBI试点的前置门槛&#xff1a;先搞定最小可行数据集&#xff0c;不用全量建设 ChatBI是观远数据推出的自然语言分析产品&#xff0c;用户可以通过口语化的提问直接获取数据结果、可视化图表甚至分析结论&#xff0c;无需掌握复杂的报表制作或SQL查询技能。在BI试点阶段引入…...

编程新知 2026/4/2 0:10:45

Modbus协议详解：从原理到工业应用实践

1. Modbus协议概述Modbus是一种应用层报文传输协议&#xff0c;由Modicon公司&#xff08;现为施耐德电气旗下品牌&#xff09;于1979年开发。作为工业自动化领域最广泛采用的通信协议之一&#xff0c;它定义了控制器设备之间交换信息的通用语言。关键特性&#xff1a;协议标准…...

编程新知 2026/4/2 0:08:45

DFRobot URM07超声波传感器UART通信与温度补偿详解

1. DFRobot URM07超声波测距传感器技术深度解析1.1 产品定位与工程价值DFRobot URM07&#xff08;SKU: SEN0153&#xff09;是一款面向嵌入式系统设计的工业级超声波距离传感器模块&#xff0c;其核心价值在于将高精度测距、环境温度补偿、超低功耗与UART标准化接口四者深度融合…...

编程新知 2026/4/1 23:34:19

MAA游戏助手：如何让《明日方舟》的日常任务自动完成？

MAA游戏助手&#xff1a;如何让《明日方舟》的日常任务自动完成&#xff1f; 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: h…...

编程新知 2026/4/1 19:49:16

Qwen3-TTS-12Hz-1.7B-Base应用场景：智能音箱多语种交互语音引擎升级

Qwen3-TTS-12Hz-1.7B-Base应用场景&#xff1a;智能音箱多语种交互语音引擎升级 重要提示&#xff1a;本文仅讨论技术实现方案&#xff0c;所有内容均基于公开技术文档和测试数据&#xff0c;不涉及任何政治敏感内容&#xff0c;完全符合内容安全规范。 1. 智能音箱语音交互的现…...

编程新知 2026/4/1 19:02:56

intv_ai_mk11保姆级教程：如何用supervisorctl诊断服务异常并快速恢复

intv_ai_mk11保姆级教程&#xff1a;如何用supervisorctl诊断服务异常并快速恢复 1. 服务异常诊断的重要性 当你使用intv_ai_mk11文本生成服务时&#xff0c;可能会遇到服务响应慢、无法生成内容或页面无法访问的情况。这些问题的根源可能来自多个方面&#xff1a;模型加载异…...

编程新知 2026/4/1 17:13:56

Java开发者指南：CV_UNet图像着色模型集成实战

Java开发者指南&#xff1a;CV_UNet图像着色模型集成实战 1. 引言 作为一名Java开发者&#xff0c;你可能经常遇到需要处理图像着色的场景。比如老照片修复、黑白影像上色&#xff0c;或者给设计稿添加色彩。传统方法要么效果一般&#xff0c;要么需要深厚的技术背景。现在有…...

编程新知 2026/4/1 15:30:10

Windows音频路由终极指南：如何免费实现应用程序级音频设备管理

Windows音频路由终极指南&#xff1a;如何免费实现应用程序级音频设备管理 【免费下载链接】audio-router Routes audio from programs to different audio devices. 项目地址: https://gitcode.com/gh_mirrors/au/audio-router 你是否曾遇到过这样的困扰&#xff1a;在…...

编程新知 2026/4/1 15:15:41