React中的合成事件

合成事件与原生事件  区别:

1. 命名不一样,原生用纯小写方式,react用小驼峰的方式

        原生:onclick      React的:onClick

2. 事件处理函数的写法不一样

        原生的是传入一个字符串,react写法传入一个回调函数

3. 阻止默认行为方式不同

        原生:return false,    react中的:event.preventDefault()

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 为了在回调中使用this, 这个绑定是必不可少的this.handleClick = this.handleClick.bind(this)handleClick(){this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick,this的值为undefined<Button onClick={this.handleClick}> // 2. 传入一个回调函数{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}

【 拓展:为什么需要绑定this 】

button按钮编译的过程:React.createElement()

// 伪代码
// 证明为什么绑定this
function creteElement (dom, params) {var domObj = document.createElement(dom)domObj.onClick = params.onClick // 后面的onClick(当前的onClick函数)赋值给前面的onClick, 这时,onClick执行的作用域是外层作用域。所以return出去的值找不到this.handleClick。[所以需要绑定this指定到当前的作用域]domObj.innerHTML = params.contentreturn domObj
}React.creteElement('button', {onClick: this.handleClick  
}, this.state.isToggleOn ? 'ON' : 'OFF')

如果不想绑定this的写法:

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 法1:bind绑定:为了在回调中使用this, 这个绑定是必不可少的// this.handleClick = this.handleClick.bind(this)handleClick = () => { // 法2:写成箭头函数,箭头函数没有作用域的this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick,this的值为undefined<Button onClick={() => this.handleClick()}> // 2. 传入一个回调函数   法3{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}

. 为何React要用合成事件机制

1. 进行浏览器兼容、跨平台、事件代理(移动端和pc端的一些原生事件不一定完全兼容的)
2. 挂载到documnet,减少内存消耗,避免频繁绑定和解绑事件,也方便事件统一管理

3. 避免垃圾回收、react事件池

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

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

相关文章

ajax与json

目录 1、ajax1.1、什么是ajax1.2、ajax核心AJAX 工作原理示例代码重要属性和方法兼容性 1.3、jQuery ajax什么是jQuery ajaxjQuery AJAX 核心概念基本用法1. **使用 $.ajax() 方法**2. **使用简化方法****使用 $.get() 方法****使用 $.post() 方法** 常用配置选项示例&#xff…

CSS——26. 伪元素2(“::before ,::after”)

::before伪类 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>伪元素</title><style type"text/css">div::before{content: "我最棒";}}</style></head><body><!--…

Openssl1.1.1s rpm包构建与升级

rpmbuild入门知识 openssh/ssl二进制升级 文章目录 前言一、资源准备1.下载openssh、openssl二进制包2.安装rpmbuild工具3.拷贝源码包到SOURCES目录下4.系统开启telnet&#xff0c;防止意外导致shh无法连接5.编译工具安装6.补充说明 二、制作 OpenSSL RPM 包1.编写 SPEC 文件2.…

patchwork++地面分割学习笔记

参考资料&#xff1a;古月居 - ROS机器人知识分享社区 https://zhuanlan.zhihu.com/p/644297447 patchwork算法一共包含四部分内容&#xff1a;提出了以下四个部分&#xff1a;RNR、RVPF、A-GLE 和 TGR。 1&#xff09;基于 3D LiDAR 反射模型的反射噪声消除 (RNR)&#xff…

基于Spring Boot的海滨体育馆管理系统的设计与实现

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的海滨体育馆管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 宠物医院…

通过Android Studio修改第三方jar包并重新生成jar包

最近接手了来自公司其他同事的一个Unity项目,里面有一个封装的jar包要改动一下,无奈关于这个jar包的原工程文件丢失了,于是自己动手来修改下jar包,并做下记录。 一、导入第三方jar包 1、新建项目EditJarDemo(项目名随便取) 2、新建libs文件夹,把你要修改的third.jar 复制…

浅尝Selenium自动化框架

浅尝Selenium自动化框架 Selenium基本介绍Selenium原理Selenium学习要点写个Selenium Demo结束 Selenium基本介绍 Selenium 是一个开源的自动化测试工具&#xff0c;只用于测试 Web 应用程序。它支持多种编程语言&#xff08;如 Java、Python、C# 等&#xff09;来编写测试脚本…

计算机网络之---物理层设备

什么是物理层设备 物理层设备是指负责数据在物理媒介上传输的硬件设备&#xff0c;它们主要处理数据的转换、信号的传输与接收&#xff0c;而不涉及数据的内容或意义。常见的物理层设备包括网卡、集线器、光纤收发器、调制解调器等。 物理层设备有哪些 1、网卡&#xff08;N…

SQL中的数据库对象

视图&#xff1a;VIEW 概念 ① 虚拟表&#xff0c;本身不存储数据&#xff0c;可以看做是存储起来的SELECT语句 ② 视图中SELECT语句中涉及到的表&#xff0c;称为基表 ③ 针对视图做DML操作&#xff0c;对影响到基表中的数据&#xff0c;反之亦然 ④ 创建、删除视图本身&#…

flink的EventTime和Watermark

时间机制 Flink中的时间机制主要用在判断是否触发时间窗口window的计算。 在Flink中有三种时间概念&#xff1a;ProcessTime、IngestionTime、EventTime。 ProcessTime&#xff1a;是在数据抵达算子产生的时间&#xff08;Flink默认使用ProcessTime&#xff09; IngestionT…

web服务器架构,websocket

1. 非前后端分离架构 1. 前端html后端servlet 被tomcat服务器打包&#xff0c;统一指定根目录入口。通过原生表单发送到后端&#xff0c;后端根据请求数据进行重定向或请求转发&#xff0c;这样就不能进行动态渲染&#xff0c;也就必须存在很多静态html对应每一个请求。 这里…

Ubuntu 下测试 NVME SSD 的读写速度

在 Ubuntu 系统下&#xff0c;测试 NVME SSD 的读写速度&#xff0c;有好多种方法&#xff0c;常用的有如下几种&#xff1a; 1. Gnome-disks Gnome-disks&#xff08;也称为“Disks”&#xff09;是 GNOME 桌面环境中的磁盘管理工具&#xff0c;有图形界面&#xff0c;是测试…

SpringBoot之核心配置

学习目标&#xff1a; 1.熟悉Spring Boot全局配置文件的使用 2.掌握Spring Boot配置文件属性值注入 3.熟悉Spring Boot自定义配置 4.掌握Profile多环境配置 5.了解随机值设置以及参数间引用 1.全局配置文件 Spring Boot使用 application.properties 或者application.yaml 的文…

后端服务集成ElasticSearch搜索功能技术方案

文章目录 一、为什么选用ElasticSearch二、ElasticSearch基本概念1、文档和字段2、索引和映射3、倒排索引、文档和词条4、分词器 三、ElasticSearch工作原理1、Term Dictionary、Term index2、Stored Fields3、Docs Values4、Segment5、Lucene6、高性能、高扩展性、高可用①高性…

举例说明AI模型怎么聚类,最后神经网络怎么保存

举例说明怎么聚类,最后神经网络怎么保存 目录 举例说明怎么聚类,最后神经网络怎么保存K - Means聚类算法实现神经元特征聚类划分成不同专家的原理和过程 特征提取: 首先,需要从神经元中提取有代表性的特征。例如,对于一个多层感知机(MLP)中的神经元,其权重向量可以作为特…

ocrmypdf使用时的cannot import name ‘PdfMatrix‘ from ‘pikepdf‘问题

最近在做pdf的ocr,之前使用过ocrmypdf&#xff0c;打算再次使用&#xff0c;发现它更新了&#xff0c;所以就打算使用最新版 环境&#xff1a;win11anaconda 创建虚拟环境后安装语句&#xff1a; pip install ocrmypdf -i https://pypi.tuna.tsinghua.edu.cn/simple pip in…

【JavaEE进阶】获取Cookie/Session

&#x1f340;Cookie简介 HTTP协议自身是属于 "⽆状态"协议. "⽆状态"的含义指的是: 默认情况下 HTTP 协议的客⼾端和服务器之间的这次通信,和下次通信之间没有直接的联系.但是实际开发中,我们很多时候是需要知道请求之间的关联关系的. 例如登陆⽹站成…

Oracle:ORA-00904: “10“: 标识符无效报错详解

1.报错Oracle语句如下 SELECT YK_CKGY.ID,YK_CKGY.DJH,YK_CKGY.BLRQ,YK_CKGY.ZBRQ,YK_CKGY.SHRQ,YK_CKGY.YT,YK_CKGY.ZDR,YK_CKGY.SHR,YK_CKGY.BZ,YK_CKGY.JZRQ,YK_CKGY.ZT,YK_CKGY.CKLX,(case YK_CKGY.CKLXwhen 09 then药房调借when 02 then科室退药when 03 then损耗出库when…

Linux 磁盘管理命令:使用xfs 管理命令

文章目录 Linux磁盘管理命令使用xfs 管理命令1.命令说明2&#xff0e;建立 XFS 文件系统4&#xff0e;调整 XFS 文件系统各项参数5&#xff0e;在线调整 XFS 文件系统的大小6&#xff0e;暂停和恢复 XFS 文件系统7&#xff0e;尝试修复受损的 XFS 文件系统8&#xff0e;备份和恢…

《Spring Framework实战》3:概览

欢迎观看《Spring Framework实战》视频教程 Spring Framework 为基于现代 Java 的企业应用程序提供了全面的编程和配置模型 - 在任何类型的部署平台上。 Spring 的一个关键要素是应用程序级别的基础设施支持&#xff1a;Spring 专注于企业应用程序的 “管道”&#xff0c;以便…