当前位置: 首页 > 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;很…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...