(三)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.mzph.cn/news/850617.shtml

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

相关文章

【值得一看的新特性】JDK21

文章目录 1. JEP 425: 虚拟线程 (Virtual Threads)1.1 是什么1.2 为什么1.3 怎么用 2. JEP 428: 结构化并发 (Structured Concurrency)2.1 是什么2.2 为什么2.3 怎么用 3. JEP 440: Record模式 (Record Patterns)3.1 是什么Record类型 3.2 为什么3.3 怎么用 4. JEP 427: switch…

9.0 Android中的网络技术

Android中网络相关的技术&#xff0c;主要分别两种&#xff0c;一种为直接显示网页&#xff0c;另外一种为获取服务器中的数据进行设置。 权限声明 访问网络是需要声明权限 <manifest xmlns:android"http://schemas.android.com/apk/res/android"package"…

mac m1使用docker安装mysql5.7,并且开启binlog

1. 使用 mysql/mysql-server:5.7 镜像 创建一个名为 docker-compose.yml 的文件&#xff0c;内容如下&#xff1a; version: 3.1services:mysql:image: mysql/mysql-server:5.7container_name: mysql57ports:- "3306:3306"environment:MYSQL_ROOT_PASSWORD: yourpa…

k8s学习--kubernetes服务自动伸缩之水平收缩(pod副本收缩)VPA详细解释与安装

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

51单片机采用定时器T1的方式1的中断计数方式,外接开关K4按4次后,8只LED闪烁不停

1、功能描述 采用定时器T1的方式1的中断计数方式&#xff0c;外接开关K4按4次后&#xff0c;8只LED闪烁不停 2、实验原理 定时器原理:8051的定时器可以用于计数外部事件或执行内部定时操作。在本程序中&#xff0c;定时器1被设置为模式2&#xff0c;即8位自动重装载定时器模式…

DefaultTokenServices源码

文章目录 DefaultTokenServices实现的接口AuthorizationServerTokenServicesResourceServerTokenServicesConsumerTokenServices 代码属性定义createAccessToken(OAuth2Authentication)createRefreshToken(OAuth2Authentication) DefaultTokenServices DefaultTokenServices是…

Unity Shader基础知识的入门了解

目录 1、Unity 中的shader 里面的所谓的顶点坐标&#xff0c;用通俗的语言讲解一下? 什么是顶点&#xff1f; 顶点坐标是什么&#xff1f; 通俗解释顶点坐标 在Unity Shader中的顶点坐标 在Shader中使用顶点坐标 总结 2、顶点UV1/UV2 是什么意思&#xff0c;用通俗的语…

LeetCode116.填充每个节点的下一个右侧节点指针

法一&#xff1a; /* // Definition for a Node. class Node { public:int val;Node* left;Node* right;Node* next;Node() : val(0), left(NULL), right(NULL), next(NULL) {}Node(int _val) : val(_val), left(NULL), right(NULL), next(NULL) {}Node(int _val, Node* _left…

AI大模型学习(非常详细)零基础入门到精通,收藏这一篇就够了

前言 随着人工智能技术的快速发展&#xff0c;AI大模型学习正成为一项备受关注的研究领域。为了提高模型的准确性和效率&#xff0c;研究者们需要具备深厚的数学基础和编程能力&#xff0c;并对特定领域的业务场景有深入的了解。通过不断优化模型结构和算法&#xff0c;AI大模…

python如何输入回车

Python默认遇到回车的时候&#xff0c;输入结束。所以我们需要更改这个提示符&#xff0c;在遇到空行的时候&#xff0c;输入才结束。 raw_input就是从标注输入读取输入&#xff0c;输入的是什么就是什么。 文档解释&#xff1a; The function then reads a line from input,…

软考 系统架构设计师系列知识点之杂项集萃(30)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;29&#xff09; 第47题 安全性是根据系统可能收到的安全威胁的类型来分类的。其中&#xff0c;&#xff08; &#xff09;保证信息不泄露给未授权的用户、实体或过程&#xff1b;&#xff08; &a…

RabbitMQ 2万字面试题及参考答案

目录 什么是RabbitMQ? RabbitMQ的Broker、Exchange、Queue、Binding、Routing Key、VHost分别是什么? RabbitMQ中的生产者(Producer)和消费者(Consumer)的角色是什么? 什么是RabbitMQ的Channel? RabbitMQ支持哪些消息传输保证层级(如At most once, At least once…

不相同的字符串 acm模式刷题

题目描述 给定一个只包含小写字母的字符串&#xff0c;每次操作可以将两个相同的字母删除&#xff0c;然后在字符串的末尾新增任意一个小写字母。请问最少需要多少次操作&#xff0c;才能使字符串中所有的字母都不相同。 输入描述 第一行是一个整数 N&#xff0c;表示后续会有 …

UFS协议入门-分层结构

写在前面:本文参考UFS jedec3.1,本文思维导图如下 1. 分层概述 UFS协议分为3层,从上至下分别是:应用层(UAP),传输层(UTP),互联层(UIC),具体结构如下图所示。 2.1 应用层 在应用层(UAP)中,包括:UFS指令集(UCS),设备管理器(Device Manager),任务管理器(Task Manager…

代码随想录算法训练营第三十二天|122.买卖股票的最佳时机II 55. 跳跃游戏 45.跳跃游戏II

LeetCode 122.买卖股票的最佳时机II 题目链接&#xff1a;122.买卖股票的最佳时机II 踩坑&#xff1a;差点陷入不必要的细节&#xff0c;比如怎么表现买入卖出&#xff0c;怎么体现同一天买入卖出 思路&#xff1a;这里的股票买卖是看了天眼&#xff0c;明天的涨跌今天就知道…

基于FPGA的图像一维FFT变换IFFT逆变换verilog实现,包含tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 fpga仿真结果 matlab调用FPGA的仿真结果进行图像显示 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 ......................…

检测数据类型的方法有哪些

1.typeof&#xff0c;问题是对null的结果是object console.log(typeof 42); // "number" console.log(typeof hello); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.…

Knife4j 生成 API 文档

文章目录 Knife4j 简介使用步骤Knife4j 常用注解的列表案例可能遇到报错 Knife4j 简介 Knife4j 是一个增强的 Swagger 文档生成工具&#xff0c;提供了更加友好的界面和更多功能&#xff0c;使得 API 文档更加美观且易于使用。它是基于 Spring Boot 和 Swagger 进行封装的&…

2024年二级建造师考试题库及答案

一、单选题 11.对于同类型产品规格多、工序重复、工作量小的施工过程&#xff0c;编制人工定额宜采用的方法是&#xff08;&#xff09;。 A.经验估算法 B.技术测定法 C.统计分析法 D.比较类推法 答案&#xff1a;D 解析&#xff1a;本题考察的是"制定人工定额的常…