React中事件处理器的基本使用
在
React中,为了提高性能,跨浏览器兼容性和开发体验,React实现了一套自己的事件机制,利用事件委托和合成事件的方式统一管理事件订阅和分发。为了让组件能够响应用户的交互行为,
React提供了一系列的事件处理器,让开发者可以在组件上绑定相应的函数来处理不同类型的事件。
公众号:Code程序人生,个人网站:https://creatorblog.cn
什么是事件处理器
事件处理器(event handler)是一种函数,它可以在某些事件发生时被调用,例如用户点击了一个按钮,或者输入了一些内容。事件处理器可以让我们在组件中响应用户的交互行为,实现一些功能或逻辑。
React中的事件处理器
React中的事件处理器和DOM元素的事件处理器类似,但有一些语法上的不同:
React中的事件处理器的命名采用驼峰式写法,而不是全小写,例如onClick而不是onclick。React中的事件处理器需要传入一个函数作为参数,而不是一个字符串,例如onClick={handleClick}而不是onClick=“handleClick()”。React中的事件对象是合成事件(SyntheticEvent),它是对原生事件对象的封装,提供了与浏览器无关的接口,并且在事件回调函数被调用后会自动回收。
React中有很多种类的事件处理器,它们可以分为以下几类:
- 剪贴板事件:如
onCopy、onCut、onPaste等,用于处理用户复制、剪切和粘贴的操作。 - 键盘事件:如
onKeyDown、onKeyPress、onKeyUp等,用于处理用户按下、按住和松开键盘的操作。 - 焦点事件:如
onFocus、onBlur等,用于处理元素获取或失去焦点的操作。 - 表单事件:如
onChange、onInput、onSubmit等,用于处理表单元素的输入和提交的操作。 - 鼠标事件:如
onClick、onDoubleClick、onMouseEnter等,用于处理用户点击、双击和移动鼠标的操作。 - 指针事件:如
onPointerDown、onPointerMove、onPointerUp等,用于处理用户使用触摸屏或触控笔的操作。 - 滚动事件:如
onScroll,用于处理元素滚动的操作。 - 触摸事件:如
onTouchStart、onTouchMove、onTouchEnd等,用于处理用户使用触摸屏的操作。 - UI事件:如
onLoad、onError等,用于处理元素加载或出错的操作。 - 滑轮事件:如
onWheel,用于处理用户使用鼠标滑轮的操作。
React中使用事件处理器
要使用React中的事件处理器,我们需要在组件上绑定相应的函数作为参数。例如,如果我们想要在用户点击一个按钮时打印一条消息,我们可以这样写:
import React from 'react';// 定义一个函数作为事件处理器
function handleClick() {console.log('You clicked the button!');
}// 定义一个函数式组件
function Button() {return (// 在按钮上绑定onClick事件处理器,并传入handleClick函数<button onClick={handleClick}>Click me</button>);
}
注意,在函数式组件中定义的事件处理器,默认是会绑定this的。如果我们想要在事件处理器中访问组件的属性(props),我们可以直接使用props参数。例如:
import React from 'react';// 定义一个函数作为事件处理器
function handleClick(color) {console.log('You clicked the button with color ' + color);
}// 定义一个函数式组件,并接收props参数
function Button(props) {return (// 在按钮上绑定onClick事件处理器,并传入props.color作为参数<button onClick={() => handleClick(props.color)}>Click me</button>);
}
如果我们不想使用箭头函数,我们还可以使用以下方式:
使用bind方法,在事件处理器中预设参数。例如,如果我们想要在用户点击按钮时传入按钮的颜色,我们可以这样写:
import React from 'react';// 定义一个函数作为事件处理器
function handleClick(color) {console.log('You clicked the button with color ' + color);
}// 定义一个函数式组件,并接收props参数
function Button(props) {return (// 使用bind方法,在事件处理器中预设参数<button onClick={handleClick.bind(null, props.color)}>Click me</button>);
}
注意,使用bind方法时,事件对象event要放在最后一个参数的位置。例如:
import React from 'react';// 定义一个函数作为事件处理器
function handleClick(color, e) {// 阻止默认行为e.preventDefault();console.log('You clicked the button with color ' + color);
}// 定义一个函数式组件,并接收props参数
function Button(props) {return (// 使用bind方法,在事件处理器中预设参数,并将事件对象e放在最后<button onClick={handleClick.bind(null, props.color)}>Click me</button>);
}
总结
React中的事件处理器是一种让组件能够响应用户交互行为的函数。React中的事件处理器有以下特点:
- 命名采用驼峰式写法,需要传入一个函数作为参数。
- 使用合成事件对象来封装原生事件对象,并提供跨浏览器的接口。
- 在函数式组件中可以直接绑定
this或使用props参数来访问组件的属性。 - 可以使用箭头函数或
bind方法来向事件处理器传递额外的参数。
相关文章:
React中事件处理器的基本使用
在React中,为了提高性能,跨浏览器兼容性和开发体验,React实现了一套自己的事件机制,利用事件委托和合成事件的方式统一管理事件订阅和分发。 为了让组件能够响应用户的交互行为,React提供了一系列的事件处理器…...
RobotFramework
一、RobotFramework的简介和特点 1、关键字驱动: 把项目中的业务逻辑封装成一个一个的关键字,然后调用不同的关键字组成不同的业务 2、数据驱动 把测试数据放到excel:yaml文件中 通过改变文件中的数据去驱动测试用例执行 3、特点ÿ…...
【Matplotlib 绘制折线图】
使用 Matplotlib 绘制折线图 在数据可视化中,折线图是一种常见的图表类型,用于展示随着变量的变化,某个指标的趋势或关系。Python 的 Matplotlib 库为我们提供了方便易用的功能来绘制折线图。 绘制折线图 下面的代码展示了如何使用 Matplo…...
ARM汇编基本变量的定义和使用
一、ARM汇编中基本变量是什么? 数字变量: GBLA LCLA SETA 逻辑变量:GBLL LCLL SETL 字符串:GBLS LCLS SETLS 注意需要TAB键定义变量和行首改变值 二、使用步骤 1.引入库 代码如下(示例): GBLA led_num Reset_Handler PROCEXPORT Reset_Handler [WEA…...
排序算法汇总
每日一句:你的日积月累终会成为别人的望尘莫及 目录 常数时间的操作 选择排列 冒泡排列 【异或运算】 面试题: 1)在一个整形数组中,已知只有一种数出现了奇数次,其他的所有数都出现了偶数次,怎么找到…...
cocos2d 中UserDefault在windows平台下的路径问题
在使用cocos2dx c开发项目时,通常使用cocos自带的UserDefault来存储一些项目所用到的一些配置信息:如游戏的音量,游戏的闯关数等... 但是windows平台下,测试发现如果用户的帐户名使用是中文,在启动程序时会报错&#…...
ChatGPT与高等教育变革:价值、影响及未来发展
最近一段时间,ChatGPT吸引了社会各界的目光,它可以撰写会议通知、新闻稿、新年贺信,还可以作诗、写文章,甚至可以撰写学术论文。比尔盖茨、马斯克等知名人物纷纷为此发声,谷歌、百度等知名企业纷纷宣布要提供类似产品。…...
Matlab Image Processing toolbox 下载安装方法
当安装好Matlab之后,发现没有Image Processing toolbox这个图像处理工具箱 从新安装一遍, 选上 Image Processing toolbox 但是不用选matlab即可 1.找到之前安装时的Setup安装程序包,按照之前安装Matlab步骤,到选择需要安装的Ma…...
什么是消息键(Key)?如何使用消息键进行消息顺序性保证?
消息键(Key)是Kafka消息的一个可选属性,用于标识消息的逻辑关联关系。每条消息可以携带一个关键字作为其键,这个键可以是字符串、整数等数据类型。 使用消息键可以在Kafka中实现消息的顺序性保证,具体方式如下&#x…...
慎思笃行,兴业致远:金融行业的数据之道
《中庸》中说,“博学之,审问之,慎思之,明辨之,笃行之”。这段话穿越千年,指引着中国千行百业的发展。对于金融行业来说,庞大的数据量可以说是“博学”的来源。但庞大的数据体量,既是…...
Git-分支管理
文章目录 1.分支管理2.合并冲突3.合并模式4.补充 1.分支管理 Git分支管理是指在Git版本控制系统中,使用分支来管理项目的不同开发线路和并行开发的能力。通过分支,开发者可以在独立的环境中进行功能开发、bug修复等工作,而不会影响到主分支上…...
[Ubuntu 22.04] containerd配置HTTP方式拉取私仓Harbor
文章目录 1. 基础环境配置2. Docker安装3. 部署Harbor,HTTP访问4. 部署ContainerD5. 修改docker配置文件,向harbor中推入镜像6. 配置containerd6.1. 拉取镜像验证6.2. 推送镜像验证 1. 基础环境配置 [Ubuntu 22.04] 安装K8S基础环境准备脚本 2. Docker安…...
入门指南:深入解析OpenCV的copyTo函数及其与rect的应用场景
文章目录 导言copyTo函数的示例copyTo函数与rect的应用场景结论 导言 OpenCV是一个功能强大的开源计算机视觉库,广泛应用于图像处理和计算机视觉任务。在OpenCV中,copyTo函数是一个重要的图像处理函数,它允许我们在不同的图像之间复制像素数…...
2018年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版
2018年1月真题 四、写作:第56~57小题,共65分。其中论证有效性分析30 分,论说文35分。 56.论证有效性分析: 分析下述论证中存在的缺陷和漏洞,选择若干要点,写一篇600字左右的文章,对该论证的有…...
系统集成|第七章(笔记)
目录 第七章 范围管理7.1 项目范围管理概念7.2 主要过程7.2.1 规划范围管理7.2.2 收集需求7.2.3 定义范围7.2.4 创建工作分解结构 - WBS7.2.5 范围确认7.2.6 范围控制 上篇:第六章、整体管理 第七章 范围管理 7.1 项目范围管理概念 概述:项目范围管理就…...
Qt —— Vs2017编译hiredis源码并测试调用(附调用hiredis库源码)
下载hiredis源码 编译hiredis源码 1、解压下载的hiredis源码包,如图使用Vs2017打开hiredis_win.sln 2、如下两图,Vs2017打开.sln后点击升级。 分别对两个工程的debug、release进行配置。Debug配置为多线程调试DLL(MDd)、Release配置为多线程DLL(/MD),这样做是为了配合被调用…...
深入理解设计模式:设计模式定义、设计原则以及组织编目
文章目录 一、设计模式1.1 设计模式的起源1.2 设计模式的定义1.3 记录要素1.4 合理使用模式 二、设计模式的六大原则2.1 开闭原则(Open-Closed Principle, OCP)2.1.1 定义2.1.2 原则分析2.1.3 开闭原则的意义所在 2.2 单一职责原则(Single Responsibility Principle, SRP)2.4.1…...
鸿鹄协助管理华为云与炎凰Ichiban
炎凰对华为云的需求 在炎凰日常的开发中,对于服务器上的需求,我们基本都是采用云服务。目前我们主要选择的是华为云,华为云的云主机比较稳定,提供的云主机配置也比较多样,非常适合对于不同场景硬件配置的需求ÿ…...
Vite创建Vue+TS项目引入文件路径报错
使用vite搭建vue3脚手架的时候,发现main.ts中引入App.vue编辑器会报错,但是不影响代码运行。 报错信息:TS2307: Cannot find module ‘./App.vue’ or its corresponding type declarations. 翻译过来是找不到模块或者相关的声明类型&#…...
计算机里基本硬件的组成以及硬件协同
文章目录 冯诺依曼体系输入设备输出设备存储器运算器控制器协同工作的流程 冯诺依曼体系 世界上第一台通用计算机,ENIAC,于1946年诞生于美国一所大学。 ENIAC研发的前期,需要工作人员根据提前设计好的指令手动接线,以这种方式输入…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
