React_react中this的指向绑定

雨点打透心脏的1/2处 2023-02-13 03:42 27阅读 0赞

### 1.bind方式原地绑定 ###

class Maa extends React.Component{ 
    	fun(){ 
    		console.log(this)
    	}
    	
    	render(){ 
    		return(
    			<div>
    				<button onClick={ this.fun.bind(this)}>bind绑定</button>
    			</div>
    		)
    	}
    }

### 2.箭头函数进行创建 ###

class Maa extends React.Component{ 
    	fun=()=>{ 
    		console.log(this)
    	}
    	
    	render(){ 
    		return(
    			<div>
    				<button onClick={ this.fun}>箭头函数方式</button>
    			</div>
    		)
    	}
    }

### 3.constructor中提前绑定 ###

class Maa extends React.Component{ 
    	constructor(props){ 
    		super(props)
    		this.fun=this.fun.bind(this);
    	}
    	fun(){ 
    		console.log(this)
    	}
    	
    	render(){ 
    		return(
    			<div>
    				<button onClick={ this.fun}>提前绑定</button>
    			</div>
    		)
    	}
    }

### 4.把时间的调用写成箭头函数的调用方式 ###

class Maa extends React.Component{ 
    	fun(){ 
    		console.log(this)
    	}
    	
    	render(){ 
    		return(
    			<div>
    				<button onClick={ ()=>{ this.fun()}}>调用方式为箭头函数</button>
    			</div>
    		)
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 java中的构造函数、this、this()、super、super()、this动态绑定

文章目录 1、名词解释 2、简单实例演示 3、this的后期绑定实例 4、java动态绑定原理 1、名词解释

墨蓝/ 2023年10月08日 12:36/ 0 赞/ 194 阅读

相关 JavaScript中的this详细解析-this的绑定规则-this绑定规则的优先级-箭头函数的使用-箭头函数中的this

文章目录 1.this到底指向什么 2.this绑定规则 2.1 绑定一: 默认绑定 2.2 规则二:

系统管理员/ 2023年10月02日 19:49/ 0 赞/ 83 阅读

相关 js this指向判断，this指向绑定与修改

在JavaScript中，`this`的指向，大多数情况下是比较头疼的问题，本篇文章，来让你对于`this`指向问题有明确的判断方法正常的函数中`this`绑定的判断主要

灰太狼/ 2023年02月16日 00:43/ 0 赞/ 24 阅读

相关 React_react中this的指向绑定

1.bind方式原地绑定 class Maa extends React.Component{ fun(){ console.log(t

雨点打透心脏的1/2处/ 2023年02月13日 03:42/ 0 赞/ 28 阅读

相关 js中this的指向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

短命女/ 2022年09月14日 09:12/ 0 赞/ 388 阅读

相关 setInterval中this问题,以及bind绑定this的指向问题

Javascript对象中关于setTimeout和setInterval的this介绍，需要的朋友可以参考下在Javascript里，setTimeout和setInte

柔情只为你懂/ 2022年06月18日 05:42/ 0 赞/ 298 阅读

相关 bind(this)绑定this指向的对象、箭头函数和闭包

用bind(this），就是绑定this指向这个组件 componentDidMount: function () \{ this.time

系统管理员/ 2022年06月13日 04:40/ 0 赞/ 317 阅读

相关 JS中的this指向

1、普通函数： this指向 window function foo() { function fn() {

以你之姓@/ 2022年06月09日 09:07/ 0 赞/ 411 阅读

相关 js中的this指向

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。为什么要学习t

谁践踏了优雅/ 2022年05月06日 06:27/ 0 赞/ 378 阅读

相关总结JavaScript中this绑定方式

this在默认的绑定非严格模式下指向window，严格模式下指向undefined，比如下面的函数foo在非严格模式下

小灰灰/ 2020年04月21日 05:56/ 0 赞/ 1017 阅读