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

保姆级教程:在Linux上用Flume 1.7.0 + Spark 2.4.7搭建实时日志流处理管道

企业级实时日志处理实战&#xff1a;Flume 1.7.0与Spark 2.4.7深度整合指南 在当今数据驱动的商业环境中&#xff0c;实时日志处理能力已成为企业技术栈的核心竞争力。想象一下电商大促期间每秒数万条的用户行为日志&#xff0c;或是金融交易系统中毫秒级延迟的风控信号处理——…...

Keil魔术棒设置详解:为什么你的printf在STM32上不工作?

Keil魔术棒设置详解&#xff1a;为什么你的printf在STM32上不工作&#xff1f; 调试STM32项目时&#xff0c;printf输出功能突然失效是许多开发者遇到的经典问题。明明代码逻辑正确&#xff0c;串口硬件也正常&#xff0c;为什么控制台就是一片寂静&#xff1f;这通常与Keil开…...

SEO_中小企业如何低成本做好SEO推广的秘诀

为什么SEO推广对中小企业至关重要 在当今的数字经济时代&#xff0c;网络已成为中小企业营销的主要渠道。搜索引擎优化&#xff08;SEO&#xff09;推广不仅能够帮助中小企业提高在搜索引擎中的排名&#xff0c;还能带来更多的潜在客户。SEO推广常常被认为是一个高成本、高技术…...

OpenClaw对话式编程:Qwen3-14B辅助代码生成与调试

OpenClaw对话式编程&#xff1a;Qwen3-14B辅助代码生成与调试 1. 为什么需要对话式编程助手 作为一个长期与代码打交道的开发者&#xff0c;我经历过太多深夜调试的煎熬时刻——盯着报错信息反复修改却始终无法通过测试&#xff0c;或是为了一个简单的功能翻遍Stack Overflow…...

文件自动同步软件哪个好?企业级高效安全同步方案测评

文件自动同步软件对于许多中大型企业来说&#xff0c;是不可或缺的底层基础设施。不管是内部的多个服务器系统之间&#xff0c;跨部门团队之间&#xff0c;还是和外部的供应链伙伴、总部分支机构之间&#xff0c;都需要依赖文件自动同步软件来实现安全、自动化的文件传输与数据…...

基于多模态图像融合与深度学习算法的轴承故障诊断模型——GADF+Swin-CNN-GAM与GA...

基于 GADFSwin-CNN-GAM 的高创新轴承故障诊断模型 基于GADFTransformer的轴承故障诊断模型&#xff0c;附说明文件及相关论文&#xff0c;代码一定能跑通&#xff0c;有格拉姆角场GADF&#xff0c;小波变换DWT还有短时傅立叶变换STFT多种转二维图像的方式轴承故障诊断这事儿吧&…...

为什么重写equals一定也要重写hashCode方法?

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

实战利器:基于快马平台为你的车辆检测项目定制专属labelimg标注工具

在AI项目开发中&#xff0c;数据标注往往是决定模型效果的关键环节。最近我在做一个车辆检测项目时&#xff0c;发现通用的标注工具无法满足特定需求&#xff0c;于是尝试用InsCode(快马)平台快速定制了一个专属的labelimg工具。整个过程比想象中顺利&#xff0c;分享几个实战要…...

B站字幕高效下载指南:轻松获取双语字幕的实用工具

B站字幕高效下载指南&#xff1a;轻松获取双语字幕的实用工具 【免费下载链接】BiliBiliCCSubtitle 一个用于下载B站(哔哩哔哩)CC字幕及转换的工具; 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBiliCCSubtitle 还在为无法保存B站视频字幕而烦恼吗&#xff1f;Bil…...

Go OAuth2授权码流程:实现Web应用用户认证的终极指南

Go OAuth2授权码流程&#xff1a;实现Web应用用户认证的终极指南 【免费下载链接】oauth2 Go OAuth2 项目地址: https://gitcode.com/gh_mirrors/oa/oauth2 Go OAuth2授权码流程是现代Web应用用户认证的完整解决方案&#xff0c;为开发者提供了安全、标准化的身份验证机…...