(三)React事件

news2024/11/26 0:24:55

1. React基础事件绑定

语法: on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法

在这里插入图片描述

App.js

//项目根组件
//App -> index.js -> public/index.html(root)

function App() {
    const handleClick = () => {
        console.log('button被点击了')
    }
    return (
        <div className="App">
            <button onClick={handleClick}>click me</button>
        </div>
    );
}

export default App;

在这里插入图片描述

2. 使用事件对象参数

语法:在事件回调函数中设置形参e

在这里插入图片描述
在这里插入图片描述

3. 传递自定义参数

语法:事件绑定的位置改造成箭头函数的写法,再执行clickHandler实际处理业务函数的时候传递实参
在这里插入图片描述
在这里插入图片描述

注意:不能直接写函数调用,这里事件绑定需要一个函数引用

4. 同时传递事件对象和自定义参数

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1805813.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Data Mining2 复习笔记6 - Optimization Hyperparameter Tuning

6. Optimization & Hyperparameter Tuning Why Hyperparameter Tuning? Many learning algorithms for classification, regression, … Many of those have hyperparameters: k and distance function for k nearest neighbors, splitting and pruning options in decis…

【JS】立即执行函数IIFE 和闭包到底是什么关系?

历史小剧场 ”我希望认您作父亲&#xff0c;但又怕您觉得我年纪大&#xff0c;不愿意&#xff0c;索性让我的儿子给您作孙子吧&#xff01;“ ----《明朝那些事儿》 什么是立即执行函数&#xff1f; 特点&#xff1a; 声明一个匿名函数马上调用这个匿名函数销毁这个匿名函数 …

湖南(品牌控价)源点调研 手机价格管理对品牌的影响分析

前言&#xff1a;手机自发明以来&#xff0c;过去一直是国际品牌占主导地位&#xff0c;从最初的爱立信、摩托罗拉&#xff0c;到后来的诺基亚、三星&#xff0c;苹果在这个手机行业里&#xff0c;竞争激励&#xff0c;没有百年企业&#xff0c;每个品牌的盛衰都有背后的历史背…

transformer中对于QKV的个人理解

目录 1、向量点乘 2、相似度计算举例 3、QKV分析 4、整体流程 (1) 首先从词向量到Q、K、V (2) 计算Q*&#xff08;K的转置&#xff09;&#xff0c;并归一化之后进行softmax (3) 使用刚得到的权重矩阵&#xff0c;与V相乘&#xff0c;计算加权求和。 5、多头注意力 上面…

VMware Fusion 如何增加linux硬盘空间并成功挂载

文章目录 0. 前言1. 增加硬盘空间2. 硬盘分区2.1 查看硬盘2.2 分区2.3 格式化2.4 挂载 3. 参考 0. 前言 如果发现虚拟机分配的硬盘不足&#xff0c;需要增加硬盘空间。本文教给大家如何增加硬盘空间并成功挂载。 查看当前硬盘使用情况&#xff1a; df -h可以看到&#xff0c…

使用 GPT-4 创作高考作文 2024年

使用 GPT-4 创作高考作文 2024年 使用 GPT-4 创作高考作文&#xff1a;技术博客指南 &#x1f914;✨摘要引言正文内容&#xff08;详细介绍&#xff09; &#x1f4da;&#x1f4a1;什么是 GPT-4&#xff1f;高考作文题目分析 ✍️&#x1f9d0;新课标I卷 人类智慧的进步&…

二次规划问题(Quadratic Programming, QP)原理例子

二次规划(Quadratic Programming, QP) 二次规划(Quadratic Programming, QP)是优化问题中的一个重要类别,它涉及目标函数为二次函数并且线性约束条件的优化问题。二次规划在控制系统、金融优化、机器学习等领域有广泛应用。下面详细介绍二次规划问题的原理和求解过程 二…

k8s学习--kubernetes服务自动伸缩之垂直伸缩(资源伸缩)VPA详细解释与安装

文章目录 前言VPA简介简单理解详细解释VPA的优缺点优点1.自动化资源管理2.资源优化3.性能和稳定性提升5.成本节约6.集成性和灵活性 缺点1.Pod 重启影响可用性2.与 HPA 冲突3.资源监控和推荐滞后&#xff1a;4.实现复杂度&#xff1a; 核心概念Resource Requests 和 Limits自动调…

多曝光融合算法(三)cv2.createAlignMTB()多曝光图像融合的像素匹配问题

文章目录 1.cv2.createAlignMTB() 主要是计算2张图像的位移&#xff0c;假设位移移动不大2.多曝光图像的aline算法&#xff1a;median thresold bitmap原理讲解3.图像拼接算法stitch4.多曝光融合工具箱 1.cv2.createAlignMTB() 主要是计算2张图像的位移&#xff0c;假设位移移动…

开发做前端好还是后端好?

目录 一、引言 二、两者的对比分析 技能要求和专业知识&#xff1a; 职责和工作内容&#xff1a; 项目类型和应用领域&#xff1a; 就业前景和市场需求&#xff1a; 三、技能转换和跨领域工作 评估当前技能&#xff1a; 确定目标领域&#xff1a; 掌握相关框架和库&a…

端午节大家都放假了吗

端午节作为中国四大传统节日之一&#xff0c;具有深厚的文化内涵和广泛的群众基础&#xff0c;因此&#xff0c;在这个节日里发布软文&#xff0c;可以围绕其传统习俗、美食文化、家庭团聚等方面展开&#xff0c;以吸引读者的兴趣。 首先&#xff0c;可以从端午节的起源和传统习…

轴承接触角和受力分析

提示&#xff1a;轴承接触角和受力分析 文章目录 1&#xff0c;接触角2&#xff0c;轴承受力分析 1&#xff0c;接触角 所谓公称接触角就是指轴承在正常状态下&#xff0c; 滚动体和内圈及外圈沟道接触点的法线与轴心线的垂直平面之间的夹角。 按滚动轴承工作时所能承受载荷的…

倩女幽魂手游攻略:云手机自动搬砖辅助教程!

《倩女幽魂》手游自问世以来一直备受玩家喜爱&#xff0c;其精美画面和丰富的游戏内容让人沉迷其中。而如今&#xff0c;借助VMOS云手机&#xff0c;玩家可以更轻松地进行搬砖&#xff0c;提升游戏体验。 一、准备工作 下载VMOS云手机&#xff1a; 在PC端或移动端下载并安装VM…

Spring 自动配置 condition

目录 前言 1. 自定义condition加载bean 1.1. 自定义一个condition注解 1.2. 实现自定义注解对应的实现类 1.3. 使用如上注解 1.4. 使用Spring上下文获取一下改bean 2. 我们来看看Spring是如何加载redisTemplate的。 2.1. 找到Spring的autoconfigure的jar包&#xff0c;我们…

C/C++学习笔记 CMake 与 Make有什么区别?

一、什么是编译&#xff1f; 编译器是一种将源代码翻译成机器码的程序。代码的编译包括几个步骤&#xff0c;包括预处理、编译和链接&#xff0c;以创建可在其目标计算机上直接运行的库或可执行文件。 ​ 这个编译过程也称为构建过程&#xff0c;这是 CMake 和Make发挥…

hid报表描述符不同item含义及整体结构

参考 报表描述符一般是两个字节同时出现 databtagbtypebsize表示两个字节 data表示一个字节&#xff0c; btagbtypebsize表示一个字节&#xff0c;又因为报表描述符中的数据都是小位权在前&#xff0c; 例如&#xff1a;0x05,0x01表示的是usage page(1),表示的是usage page的…

【算法篇】求最长公共前缀JavaScript版本

题目描述 给你一个大小为 n 的字符串数组 strs &#xff0c;其中包含n个字符串 , 编写一个函数来查找字符串数组中的最长公共前缀&#xff0c;返回这个公共前缀。 数据范围&#xff1a; 数据范围:0<n<5000&#xff0c;0<len(strsi)< 5000 进阶:空间复杂度 O(1)&a…

Java基础教程 - 14 Maven项目

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 14 Maven项目 Java 为什么那么强大&#xff0c;很大一部分原因是在实际的开发中&#xff0c;可以将别人开发的模块引入到我们自己的项目中&#xff0c;这样别人开发好了&#xff0c;我拿来就…

Android电量优化,让你的手机续航更持久

节能减排&#xff0c;从我做起。一款Android应用如果非常耗电&#xff0c;是一定会被主人嫌弃的。自从Android手机的主人用了你开发的app&#xff0c;一天下来&#xff0c;也没干啥事&#xff0c;电就没了。那么他就会想尽办法找出耗电量杀手&#xff0c;当他找出后&#xff0c…

把chatgpt当实习生,进行matlab gui程序编程

最近朋友有个项目需要整点matlab代码&#xff0c;无奈自己对matlab这种工科的软件完全是外行&#xff0c;无奈只有求助gpt这种AI助手了。大神们告诉我们&#xff0c;chatgpt等的助手已经是大学实习生水平啦&#xff0c;通过多轮指令交互就可以让他帮你完成工作啦&#xff01;所…