React——关于事件处理

如何注册事件

驼峰命名法,语法on+事件名={事件处理程序}

比如onClick={this.buttonClick}

class App extends React.Component {render() {return (<div><button onClick={this.buttonClick}>点击按钮触发事件</button></div>)}buttonClick() {alert('事件触发')}
}
事件对象 (涉及阻止事件流 e.preventDefault())

通过事件处理程序的参数获取到事件对象

function buttonClick(e) {e.preventDefault()console.log('事件对象', e)
}
// 比如阻止a标签调整的共呢个
<a onClick={this.buttonClick}>点击不调整,按钮样式</a>
this指向

关于React的this的指向,与我们JS的this指向原理是一致的,但为什么会丢失呢?这个是JS原本的缺陷。

this的指向坚持谁调用指向谁,我们可以通过react的源码看到render函数通过instance去调用的,那render内部的this指向肯定是instance;

如果我们在render函数内直接调用其他事件,它this的指向也会是instance;

如果我们在render return的虚拟dom的on事件当中注册事件的话,那this的指向会是undefined,因为是模块化环境,全局状态的this不是window而是undefined

那么为什么在vue框架里面不存在这个问题的呢?

vue实例里,我们所有方法都写在methods里面,我们通过源码可以发现,vue内部通过fn.bind(this),把所以方法的this都进行了绑定。

模块化环境下,非render方法调用、通过on注册事件(无论组件内外)中的this指向的是undefined 【事件处理函数中】

模块化环境下,render方法中的this指向是当前instance

this指向解决方案(建议使用方案3)
  • 方案1:通过在render函数内调用去注册事件,结合箭头函数
class App extends React.Component {state = {title: 'hello react'}buttonClick() {console.log(this.state.title)}render() {return (<div><button onClick={() => {this.buttonClick()}}>点击按钮,查看this指向</button></div>)}
}
  • 方案2:使用bind绑定当前this(不调用fn),不要用apply、call,因为它们会调用fn
class App extends React.Component {state = {title: 'hello react'}buttonClick() {console.log(this.state.title)}render() {return (<div><button onClick={this.buttonClick.bind(this)}>点击按钮,查看this指向</button></div>)}
}
  • 方案3:声明方法的时候使用箭头函数,箭头函数没有自己的this,声明时就指向当前环境的this,就是instance
class App extends React.Component {state = {title: 'hello react'}buttonClick = () => {console.log(this.state.title)}render() {return (<div><button onClick={this.buttonClick}>点击按钮,查看this指向</button></div>)}
}

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

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

相关文章

深度学习神经网络相关记录《二》

如何判断模型是一个好模型&#xff1f; 模型预测效果&#xff0c;也就是模型预测的准确率运算速度&#xff1b;能够处理大量数据、短时间内急速学习、可以实时进行预测&#xff0c;是机器学习的重要优势&#xff1b;可解释性&#xff1b;深度学习已经不太关系这一点了&#xf…

macOS安装erlang以及rabbitMq详情版本

1.利用HomeBrew安装&#xff0c;如果你电脑没有HomeBrew可以跳转到HomeBrew安装教程 https://blog.csdn.net/weixin_50268501/article/details/136820299 2.要想运行rabbitMq要有Erlang 安装erlang brew install erlang3.安装RabbitMq brew install rabbitmq4.执行完上述命令…

基础:TCP三次握手做了什么,为什么要握手?

1. TCP 三次握手在做些什么 1. 第一次握手 &#xff1a; 1&#xff09;握手作用&#xff1a;客户端发出建立连接请求。 2&#xff09;数据处理&#xff1a;客户端发送连接请求报文段&#xff0c;将SYN位置为1&#xff0c;Sequence Number为x;然后&#xff0c;客户端进入SYN_S…

基于Matlab的视频人面检测识别,Matalb实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

分布式(计算机算法)

目录 分布式计算 分布式​编辑 分布式和集群 分布式和集群的应用场景 分布式应用场景 集群应用场景 哪种技术更优、更快、更好呢 性能 稳定性 以下概念来源于百度百科 分布式计算 分布式计算是近年提出的一种新的计算方式。所谓分布式计算就是在两个或多个软件互相共享信息…

【uniapp】uniapp设置改变全局字体大小功能:

文章目录 一、效果&#xff1a;二、文档&#xff1a;三、案例&#xff1a;引用插件&#xff0c;将项目中的字体单位rpx换成rem&#xff0c;结合官网提供的page-meta属性&#xff0c;通过控制根字体大小&#xff0c;达到调节字体大小要求。 一、效果&#xff1a; 二、文档&#…

Bash Shell中双引号中的感叹号问题详解

Bash Shell中双引号中的感叹号问题详解 在Bash Shell中&#xff0c;感叹号(!)是一个特殊字符&#xff0c;主要用于历史扩展。历史扩展允许你使用!来引用历史命令。然而&#xff0c;当你在双引号中使用感叹号时&#xff0c;如果你在双引号中直接使用感叹号&#xff0c;它可能会…

redis cpu百分百问题

系统使用spring cloud alibaba微服务框架&#xff0c;应用使用K8S发布&#xff0c;使用redis作为缓存数据库&#xff0c;运行一段时间之后开发反应早高峰时整个系统响应缓慢&#xff0c;排查发现服务网关gateway的pod健康状态频繁unhealthy&#xff0c;导致重启&#xff0c;且此…

冯米塞斯应力(von Mises stress)云图的MATLAB计算方法

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material

代码随想录算法训练营第46天 | 完全背包,139.单词拆分

动态规划章节理论基础&#xff1a; https://programmercarl.com/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 完全背包理论基础&#xff1a; https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9…

全网最全的幻兽帕鲁服务器搭建教程——阿里云保姆级教程

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

DVWA靶场-SQL InjectionSQL注入

SQL Injection&#xff08;SQL注入&#xff09;概念 就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串&#xff0c;最终达到欺骗服务器执行恶意的SQL命令。具体来说&#xff0c;它是利用现有应用程序&#xff0c;将&#xff08;恶意&#xff09;的SQL命令注…

YOLOv2学习

YOLOv2学习 Anchor boxes 和 bounding boxes 的区别锚框&#xff08;Anchor Boxes&#xff09;边界框&#xff08;Bounding Boxes&#xff09;锚框与边界框的区别 摘要引言数据集组合方法&#xff08;Dataset Combination Method&#xff09;联合训练算法&#xff08;Joint Tra…

Python AI 之PhotoMaker 安装总结

PhotoMaker 官方文档 PhotoMaker GitHub 地址:https://github.com/TencentARC/PhotoMaker PhotoMaker Windows 安装 温馨提示&#xff1a;PhotoMaker 官网github 版本为通用版本&#xff0c;如果是Windows系统安装PhotoMarker 需要使用截图下的版本&#xff1a; 第一步&am…

nvm安装和使用保姆级教程(详细)

一、 nvm是什么 &#xff1a; nvm全英文也叫node.js version management&#xff0c;是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具&#xff0c;为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 二、卸载之前安装的node: …

【Spring MVC】Spring MVC拦截器(Interceptor)

目录 一、拦截器介绍 二、拦截器 Interceptor 定义 2.1 HandlerInterceptor接口 2.2 Spring MVC中提供的一些HandlerInterceptor接口实现类 1、AsyncHandlerInterceptor 2、WebRequestInterceptor 3、MappedInterceptor 4、ConversionServiceExposingInterceptor 三、拦…

creator-webview加载优化

title: creator-webview加载优化 categories: Cocos2dx tags: [cocos2dx, creator, webview, 优化, 加载, 性能] date: 2024-03-02 13:17:20 comments: false mathjax: true toc: true creator-webview加载优化 前篇 Android WebView shouldInterceptRequest - https://www.ji…

Cesium.js计算两个地理坐标点之间按照1米为间隔进行等分的所有插值点的经纬度坐标

功能介绍&#xff1a; 首先&#xff0c;定义了两个地理坐标点 point1 和 point2&#xff0c;分别表示两个点的经度、纬度和高度。接着&#xff0c;通过 Cesium.Cartesian3.distance 方法计算了两点之间的直线距离。然后&#xff0c;根据直线距离将两点之间的距离进行等分&#…

Linux——动静态库的制作及使用与动态库原理

目录 一、静态库 1.静态库的制作 2.静态库的使用 加载静态库方法一&#xff1a;安装头文件与库文件 加载静态库方法二&#xff1a;指定文件目录 二、动态库 1.动态库的制作 2.动态库的使用 方法一&#xff1a;安装到系统中 方法二&#xff1a;软链接 方法三&…

新火种AI|英伟达GTC大会在即,它能否撑住场面,为AI缔造下一个高度?

作者&#xff1a;小岩 编辑&#xff1a;彩云 英伟达不完全属于AI行业&#xff0c;但神奇的是&#xff0c;整个AI领域都有着英伟达的传说。因为几乎所有的AI巨头都需要英伟达的芯片来提供算力支持。 也正因此&#xff0c;纵使AI赛道人来人往&#xff0c;此起彼伏&#xff0c;…