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

模板字符串中定义方法并传参

遇到一个使用js es6的模板字符串进行事件绑定和传参的问题,这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。

以react为例,写一个demo记录一下

模板字符串中写方法的话需要用onclick来定义,传参需要这么写${char},并且用字符串包裹中,否则会提示未定义的变量,如下:

`<span style="background-color: #a2efe6; cursor: pointer" onclick="onHandleClick('${char}')" >${char}</span>`

然后需要把这个方法挂载到window下才可以执行到,如下:

useEffect(() => {init();
}, [])const init = () => {(window as any).onHandleClick = (e) => {console.log('onHandleClick',e);}
}

其他框架的写法大同小异

相关文章:

模板字符串中定义方法并传参

遇到一个使用js es6的模板字符串进行事件绑定和传参的问题&#xff0c;这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。 以react为例&#xff0c;写一个demo记录一下 模板字符串中写方法的话需要用onclick来定义&#xff0c;传参需要这么写${char…...

Numpy 数组元素添加与元素删除函数详解

元素添加 Numpy中有类似python列表操作函数append()及insert()&#xff0c;但是用法稍有不同&#xff0c;append()及insert()不作为数组的实例方法使用。 np.append() np.append()的参数如下 def append(arr, values, axisNone): 其中&#xff0c;arr为数组对象&#xff0…...

【Python】高效图像处理库:pyvips

月亮慢慢变圆&#xff0c;日子慢慢变甜。 在图像处理领域&#xff0c;pyvips 是一个轻量级且高效的库&#xff0c;适合处理大规模图像、实现高性能的操作。相较于其他常见的图像处理库如 PIL 或 OpenCV&#xff0c;pyvips 以其低内存占用和出色的速度脱颖而出。本文将介绍 pyv…...

java项目之在线考试与学习交流网页平台源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的在线考试与学习交流网页平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于JAVA语言…...

【Android源码】屏蔽系统通知出现在系统栏中

环境 aosp: android-14.0.0_r1 真机&#xff1a;Pixel5 目标 我想把usb连接的两个系统通知屏蔽掉 “正在通过 USB 为此设备充电”“已连接到 USB 调试” 步骤 首先找到这两句内容出现的位置在 frameworks/base/core/res/res/values-zh-rCN/strings.xml <string name&…...

MySQL索引测试

在MySQL中&#xff0c;即使表中没有数据&#xff0c;查询优化器也会考虑使用索引来执行查询。但在某些情况下&#xff0c;查询优化器可能会选择不使用索引&#xff0c;这通常是基于成本效益分析的结果。 表中没有任何数据时&#xff0c;无论是否使用索引&#xff0c;查询结果都…...

【软件设计】常用设计模式--观察者模式

软件设计模式&#xff08;四&#xff09; 观察者模式一、观察者模式&#xff08;Observer Pattern&#xff09;1. 概念2. 模式结构3. UML 类图4. 实现方式C# 示例步骤1&#xff1a;定义观察者接口步骤2&#xff1a;定义主题接口步骤3&#xff1a;实现具体主题步骤4&#xff1a;…...

东北非国企就职体验

有感而发&#xff0c;校招毕业选了个非央国企但偏稳的工作&#xff0c;属于事儿少离家近钱还可以。不忙&#xff0c;收入在东北也还不错&#xff0c;可是看到近期那些考上公务员那些有编制的pyq&#xff0c;真的是很感叹他们的生活真的是丰富多彩。 虽然我不忙&#xff0c;但是…...

经典sql题(二)求连续登录最多天数用户

示例数据 假设我们的 test 表有以下数据&#xff1a; iddate12023-10-01 08:00:0012023-10-02 09:00:0012023-10-03 10:00:0012023-10-05 11:00:0022023-10-01 10:00:0022023-10-02 12:00:0022023-10-03 14:00:0022023-10-04 15:00:0032023-10-01 16:00:0032023-10-02 16:00:…...

A. Closest Point

time limit per test 2 seconds memory limit per test 512 megabytes Consider a set of points on a line. The distance between two points ii and jj is |i−j||i−j|. The point ii from the set is the closest to the point jj from the set, if there is no othe…...

沟通更高效:微信群转移至企业微信操作攻略!

微信群转移到企业微信并不难&#xff0c;具体操作如下&#xff1a; 打开移动端企业微信主页&#xff0c;找到微信聊天栏中的【接收微信中的工作消息】&#xff1b; 点击【前往微信选择群聊】&#xff0c; 跳转到微信&#xff1b; 选择微信上的工作群聊&#xff0c;只能选择作…...

计算机毕业设计 基于Python Django的旅游景点数据分析与推荐系统 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

关于安卓App自动化测试的一些想法

安卓App自动化一般使用PythonAppium。页面元素通常是使用AndroidStudio中的UI Automator Viewer工具来进行页面元素的追踪。但是这里涉及到一个问题就是&#xff0c;安卓apk在每次打包的时候&#xff0c;会进行页面的混淆以及加固&#xff0c;所以导致每次apk打包之后会出现页面…...

Bigemap GIS Office 2024注册机 全能版地图下载软件

对于需要利用GIS信息进行编辑、设计的用户来说&#xff0c;Bigemap GIS Office占有重要地位。用户可以使用Bigemap GIS Office作为工具进行设计、分析、共享、管理和发布地理信息。Bigemap GIS Office能实现多种数据流转、嵌入、融合以及更多地为用户提供数据的增强处理及多种分…...

秦时明月6.2魔改版+GM工具+虚拟机一键端

今天给大家带来一款单机游戏的架设&#xff1a;秦时明月。 另外&#xff1a;本人承接各种游戏架设&#xff08;单机联网&#xff09; 本人为了学习和研究软件内含的设计思想和原理&#xff0c;带了架设教程仅供娱乐。 教程是本人亲自搭建成功的&#xff0c;绝对是完整可运行…...

firewalld实现NAT端口转发

1、准备工作 # 开启 NAT 转发 firewall-cmd --permanent --zonepublic --add-masquerade # 开放 DNS 使用的 80 端口&#xff0c;tcp# 必须&#xff0c;否则其它机器无法进行域名解析 firewall-cmd --zonepublic --add-port80/tcp --permanent # 检查是否允许 NAT 转发 f…...

中国电子学会202309青少年软件编程(Python)等级考试试卷(二级)真题

青少年软件编程(Python)等级考试试卷(二级) 分数:100 题数:37 一、单选题(共25题,每题2分,共50分) 1、 yyh = [2023, 杭州亚运会, [拱宸桥, 玉琮莲叶]] jxw = yyh[2][0] print(jxw[1] * 2)以上代码运行结果是?( ) A. 宸宸 B. 杭杭 C. 玉玉 D. 州州 2、阿宝…...

第四天旅游线路预览——从贾登峪到喀纳斯景区入口(贾登峪游客服务中心)

第四天&#xff1a;从贾登峪到喀纳斯风景区入口&#xff0c;晚上住宿贾登峪&#xff1b; 从贾登峪到喀纳斯景区入口&#xff08;贾登峪游客服务中心&#xff09;&#xff1a; 搭乘贾登峪①路车&#xff0c;路过三湾到达景区换乘中心&#xff0c;路程时长约40分钟&#xff1b; …...

个人常用命令

文章目录 linux命令基本命令screen docker命令 linux命令 基本命令 查看文件大小&#xff1a;sudo du -sh /文件路径 查看当前目录下所有文件夹大小&#xff0c;不进行递归&#xff1a;sudo du -h --max-depth1 远程复制文件:rsync -avz -e ssh -p 端口号 ip地址:/远程文件地…...

如何根据协议请求去捕捉在个文件中发出去的

场景&#xff1a;随着业务越来越复杂&#xff0c;一个“触发”可能发出去N个协议&#xff0c;此时有某一个协议发生了报错&#xff0c;需要去找这个协议&#xff0c;去文件中走读逻辑&#xff0c;去找该协议&#xff0c;效率很慢&#xff0c;业务极其复杂的情况下&#xff0c;很…...

癫痫手术精准定位:基于脑电信号昼夜节律与多生物标志物的机器学习分析框架

1. 项目概述&#xff1a;当机器学习遇见脑电信号&#xff0c;如何让癫痫手术更精准&#xff1f;作为一名长期耕耘在生物医学信号处理与机器学习交叉领域的工程师&#xff0c;我常常思考如何将算法模型从实验室的“玩具”变成临床医生手中可靠的“手术刀”。癫痫&#xff0c;这个…...

Android 11开发避坑:为什么你的App获取的Wifi MAC地址总是变?手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

对称与负电源测试:动态直流电子负载的设计、原理与应用

1. 项目概述&#xff1a;对称与负电源的静态与动态直流负载在电子实验室里&#xff0c;测试一个电源的性能&#xff0c;尤其是它的动态响应能力&#xff0c;是件既基础又关键的事。我们常说的“直流电子负载”就是这个领域的核心工具。我之前设计并分享过一个用于正电源测试的静…...

Windows 10/11系统下,SecureCRT 8.7.2保姆级安装与激活图文指南(含Keygen使用避坑点)

Windows平台SecureCRT 8.7.2全流程部署与安全配置指南在当今远程运维与网络管理的日常工作中&#xff0c;一款可靠的终端仿真工具如同工程师的瑞士军刀。作为行业标杆的SecureCRT&#xff0c;其8.7.2版本在Windows 10/11环境下的部署却常让新手陷入各种技术陷阱——从安装路径选…...

金融合规审核为何人力堆积却仍漏洞百出?2026年RegTech演进与Agent全链路闭环解决方案

在2026年的金融监管环境下&#xff0c;合规审核已不再是简单的“查漏补缺”&#xff0c;而是演变为一场高强度的算力与逻辑博弈。尽管金融机构在合规成本上的投入逐年攀升&#xff0c;甚至不惜以“人海战术”填补流程断点&#xff0c;但监管罚单的数额与频率却并未显著下降。这…...

厨房空调技术白皮书:从风冷到水冷,制冷系统在厨房场景中的工程化演进

厨房空调是暖通行业近三年技术迭代最密集的细分品类。从最初的"凉霸"&#xff08;本质是风扇&#xff09;&#xff0c;到风冷分体式&#xff0c;再到水冷一体式&#xff0c;每代技术都在解决上一代没有覆盖的用户痛点。本文以工程技术视角&#xff0c;梳理四代厨房制…...

基于IRS2092的200W D类功放设计:从PWM原理到保护电路实战

1. 项目概述与核心思路折腾音响功放&#xff0c;从经典的AB类玩到D类&#xff0c;感觉就像是从燃油车换到了电动车&#xff0c;动力响应和效率完全是两个维度。这次要聊的这块“200W Class-D Audio Power Amplifier [150115]”单板功放&#xff0c;就是一个非常典型的D类功放设…...

AutoWall终极指南:如何在Windows上轻松设置炫酷动态壁纸

AutoWall终极指南&#xff1a;如何在Windows上轻松设置炫酷动态壁纸 【免费下载链接】AutoWall &#x1f30c; Live wallpapers on Windows 7/8/10/11 using open-source wallpaper engine 项目地址: https://gitcode.com/gh_mirrors/au/AutoWall 厌倦了千篇一律的静态桌…...

3分钟上手:NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器

3分钟上手&#xff1a;NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否曾经想要修改Minecraf…...

告别KITTI!用TartanAir数据集在Unreal Engine仿真环境里“虐”你的VSLAM算法(附保姆级下载与使用指南)

用TartanAir数据集在Unreal Engine中打造VSLAM算法的"极限考场"当你的视觉SLAM算法在KITTI数据集上跑出98%的准确率时&#xff0c;是否意味着它已经准备好应对真实世界的复杂场景&#xff1f;现实往往会给乐观的开发者当头一棒——实验室里的"优等生"在遇到…...