(三)React事件

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.mfbz.cn/a/693699.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

测试开发之自动化篇 —— 使用Selenium IDE录制脚本!

今天&#xff0c;我们开始介绍基于开源Selenium工具的Web网站自动化测试。 Selenium包含了3大组件&#xff0c;分别为&#xff1a;1. Selenium IDE 基于Chrome和Firefox扩展的集成开发环境&#xff0c;可以录制、回放和导出不同语言的测试脚本。 2. WebDriver 包括一组为不同…

ATTCK红队评估(五)

环境搭建 靶场拓扑图&#xff1a; 靶机下载地址: 漏洞详情 外网信息收集 确定目标靶机地址&#xff1a; 发现主机192.168.135.150主机是本次攻击的目标地址。探测靶机开放的端口信息&#xff1a; 目标靶机开放了两个端口&#xff1a;80、3306&#xff0c;那没什么意外的话就是…

企业如何运用信息化、智能化、数字化等技术手段规避企业合同风险?

在企业运营中&#xff0c;合同管理是至关重要的一环。它涉及到企业的各个方面&#xff0c;从供应链管理到客户关系&#xff0c;从财务交易到法律合规。然而&#xff0c;传统的合同管理方式往往存在效率低下、风险控制不足等问题。 随着信息化、智能化和数字化技术的发展&#…

go语言后端开发学习(一)——JWT的介绍以及基于JWT实现登录验证

什么是JWT JWT,全名为JSON Web Token&#xff0c;是当下主流的一种服务端通信认证方式&#xff0c;具有轻量,无状态的特点&#xff0c;它实现了让我们在用户与服务器之间传递安全可靠的Json文本信息&#xff0c;它的使用过程主要是这样的&#xff1a; 当用户注册的时候&#x…

Linux——nginx部署

部署Nginx 构建Nginx服务器 &#xff08;实验需要DNS支持&#xff0c;或添加hosts条目&#xff0c;例如&#xff1a; &#xff09; 安装Nginx&#xff08;yum安装即可&#xff09; 安装依赖软件包&#xff1a; 重启、启用服务并查看服务状态&#xff1a; 默认页面&#xff0…

【深度学习】深度学习之巅:在 CentOS 7 上打造完美Python 3.10 与 PyTorch 2.3.0 环境

【深度学习】深度学习之巅&#xff1a;在 CentOS 7 上打造完美Python 3.10 与 PyTorch 2.3.0 环境 大家好 我是寸铁&#x1f44a; 总结了一篇【深度学习】深度学习之巅&#xff1a;在 CentOS 7 上打造完美Python 3.10 与 PyTorch 2.3.0 环境✨ 喜欢的小伙伴可以点点关注 &#…

模糊控制器实现对某个对象追踪输入

MATLAB是一个十分便捷的软件&#xff0c;里面提供了许多集成的组件&#xff0c;本文利用simulink实现模糊控制器实现对某个对象追踪输入。 这里的对象根据自己的需求可以修改&#xff0c;那么搭建一个闭环控制系统并不是难事儿&#xff0c;主要是对于模糊控制器参数的设置&…

海思SD3403,SS928/926,hi3519dv500,hi3516dv500移植yolov7,yolov8(21)Yolov9s测试

四天前yolov9的作者终于开源了yolov9s和yolov9t模型。这个作者之前一直没开源t,s,只有c开始的,而且onnx转换后数据大小特别大,当时直接就放弃测试了。 另外之前代码有很明显的抄v5的痕迹。所以印象很不好。 现在总算是开源t,s模型,而且这里评估的结果上来看是好于yolov8的…

IDEA创建Mybatis项目

IDEA创建Mybatis项目 第一步&#xff1a;创建库表 -- 创建数据库 create database mybatis_db;-- 使用数据库 use mybatis_db;-- 创建user表 CREATE TABLE user (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL,password VARCHAR(50) NOT NULL,email VARC…

Django API开发实战:前后端分离、Restful风格与DRF序列化器详解

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…

项目-五子棋双人对战:游戏房间的管理(5)

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com 之前我们已经实现了玩家匹配的功能, 我们都知道, 匹配完过后就可以进入游戏房间进行对战了, 所以我们下一步关注的重点就是对于游戏房间的管理. 模块详细讲解 功能需求 通过匹配的方式, 自动给玩家加入到一个游戏房间…

通过fiftyone按分类下载open-images-v7数据集,并转成yolov5可直接训练的格式

import osimport fiftyone as fo import fiftyone.zoo as foz import yamlclasses [Person, # 人 - 0Car, # 轿车 - 1Taxi, # 出租车 - 2Ambulance, # 救护车 - 3Bus, # 公共汽车 - 4Bicycle, # 自行车 - 5Motorcycle, # 摩托车 - 6Dog, # 狗 - 7Cat, # 猫 - 8M…

配置免密登录秘钥报错

移除秘钥&#xff0c;执行 ssh-keygen -R cdh2即可 参考&#xff1a;ECDSA主机密钥已更改,您已请求严格检查。 - 简书

构建第一个ArkTS应用之@卡片事件能力说明

ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互&#xff0c;当前支持router、message和call三种类型的事件&#xff0c;仅在卡片中可以调用。 接口定义&#xff1a;postCardAction(component: Object, action: Object): void 接口参数说明&#xff1…

Hadoop笔记

1.hadoop环境搭建&#xff0c;linux命令&#xff08;vi);2.分布式的基本概念&#xff0c;cap理论&#xff08;遵循此原则开发分布式数据库&#xff09;&#xff0c;hdfs,mapreduce&#xff1b;3.3.1&#xff1b;3.2重点&#xff1b;4.map&#xff0c;reduce过程&#xff0c;优缺…

OrangePi Kunpeng Pro深度评测:性能与体验的完美融合

文章目录 一、引言二、硬件开箱与介绍1.硬件清单2.硬件介绍 三、软件介绍四、性能测试1. 功率测试2. cpu测试2.1 单线程cpu测试2.2 多线程cpu测试 五、实际开发体验1. 搭建API服务器2. ONNX推理测试3. 在线推理平台 五、测评总结1. 能与硬件配置2. 系统与软件3. 实际开发体验个…

大模型的演进之路:从萌芽到ChatGPT的辉煌

文章目录 ChatGPT&#xff1a;大模型进化史与未来展望引言&#xff1a;大模型的黎明统计模型的奠基深度学习的破晓 GPT系列&#xff1a;预训练革命GPT的诞生&#xff1a;预训练微调的范式转换GPT-2&#xff1a;规模与能力的双重飞跃GPT-3&#xff1a;千亿美元参数的奇迹 ChatGP…

基于Python的AI动物识别技术研究

基于Python的AI动物识别技术研究 开发语言:Python 数据库&#xff1a;MySQL所用到的知识&#xff1a;Django框架工具&#xff1a;pycharm、Navicat、Maven 系统功能实现 系统的登录模块设计 本次设计的AI动物识别系统为了保证用户的数据安全&#xff0c;设计了登录的模块&…

【乐吾乐2D可视化组态编辑器】在线使用,快速入门

一、在线使用 乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.com/ 二、步骤 本教程将带领你快速体验2D可视化编辑器的全流程开发。 1.创建图纸 进入2d编辑器主界面后&#xff0c;主界面最中心为图纸面板&#xff0c;默认为空图纸&#xff0c;在界面左侧为组…

算法导论实战(六)(算法导论习题三十四、三十五章)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;算法启示录 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 前言 算法导论的知识点学习将持续性更新在算…