React类组件中this的指向

news/2024/7/15 19:17:38 标签: react.js, javascript, 前端

React组件分为类组件,和函数组件。函数组件不存在this指向问题,结合hook在项目中大量应用。类组件中存在着this指向问题,解决办法大概有这么几中:

总的来说,改变this的指向问题可以通过使用bind来修改this的指向,还有可以使用箭头函数来解决

1.行间定义事件后面使用bind绑定this

javascript">	run(){
	        alert("第一种方法!")
	}
  	<button onClick={this.run.bind(this)}>第一种</button>
  	

这一种方法使用bind来修改this的指向,需要注意的是bind括号内第一个参数是修改this的,后面可以设置其他参数进行传值

2.在构造函数内部声明this指向

javascript">	constructor(props) {
		super(props);
		this.state={
			//定义数据
		}
		this.run = this.run.bind(this);
	}
	
 	run(){
        	alert("第二种方法!")
 	 }
 	 
 	<button onClick={this.run}>第二种</button>

第二种方法和第一种方法原理一样,只是写的位置不同。

3.声明事件时将事件等于一个箭头函数

javascript">	run = () => {
    	alert("第三种方法!")
  	}
  	test = (e,value) => {
		console.log(e,value)
	}

	<button onClick={this.run}>第三种</button>
	
	<button onClick={e => this.test(e,'username'')>方法传参</button>
	

第三种方法是将定义的run方法再等于一个箭头函数,利用箭头函数没有自己的this指针会继承外层的作用域这个特性,来解决this指向问题

4.行间定义事件使用箭头函数

javascript"> 	run(){
    	alert("第四种方法!")
  	}
	
	<button onClick={()=>this.run()>第四种</button>
	

第四种方法和第三种方法的原理是一样的,只是写法不同,全凭个人喜好吧。


http://www.niftyadmin.cn/n/1367671.html

相关文章

js中箭头函数和普通函数区别

一.箭头函数和普通函数 箭头函数相当于匿名函数&#xff0c;并且简化了函数定义。 箭头函数有两种格式&#xff0c;一种只包含一个表达式&#xff0c;连{ … }和return都省略掉了。 还有一种可以包含多条语句&#xff0c;这时候就不能省略{ … }和return。let fun () > {c…

js递归及其应用

递归的概念 函数内部不断调用自身。递归函数的使用要注意函数终止条件避免死循环(一般都要写一个结束的条件)&#xff1b; //在递归的过程中会出错 // Maximum call stack size exceeded // 内存溢出&#xff1a;超过了最大的堆栈大小递归应用场景: 深拷贝 菜单树 遍历 DOM 树…

Js中forEach map无法跳出循环问题以及forEach会不会修改原数组

for循环里要跳出整个循环是使用break&#xff0c;但在数组中用forEach循环或者map如要退出整个循环使用break会报错&#xff0c;使用return也不能跳出循环&#xff0c; 一.JavaScript中 forEach map 方法 无法跳出循环问题及解决方案 1.forEach map 使用break报错 let arr […

React 父子组件之间传值,以及父组件如何获取子组件数据和方法

一.父组件如何获取子组件数据 0.类组件: 相关文章可以搜下&#xff0c;百度搜 react cref 重点说下函数组件 1.函数组件: 在函数组件中要获取子组件的数据,需要两步骤 1.将ref传递到子组件中, 2.需要使用forwardRef对子组件进行包装1.父组件&#xff1a; export default (…

【Ajax】HTTP相关问题-XHR使用-跨域-同源-jsonp-CORS

一.Ajax概述 1.1AJAX 简介 AJAX 全称为Asynchronous JavaScript And XML&#xff0c;就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据 AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一起使…

组件间样式覆盖问题--CSS Modules

1.组件间样式覆盖问题 ① 问题&#xff1a;CityList 组件的样式&#xff0c;会影响 Map 组件的样式 ② 原因&#xff1a;在配置路由时&#xff0c;CityList 和 Map 组件都被导入到项目中&#xff0c;那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同&#xff0c…

Android使用XLog打印与收集程序运行详细日志

原作者&#xff1a;http://blog.csdn.net/cc_want/article/details/48321325 XLog功能简绍 XLog是一款专业级的Android程序运行日志收集系统&#xff0c;它的专业主要分为以下几点&#xff1a; 1.日志打印 与android自带的系统log相比&#xff0c;它可以帮助你准确获取日志…

[C#]JSONObject解析json,C# asp.net JSON解析

前言&#xff1a;公司最近遇到问题&#xff0c;以往C#的接口通讯都是走xml的形式&#xff0c;因为现在的主流接口都采用json数据格式&#xff0c;但c#中并没有提供特别的方法帮助开发者&#xff0c;解析和生成都非常麻烦&#xff0c;我做为一个移动端开发者&#xff0c;于是想到…