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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...