bind:
<button onClick={this.handleClick(this)}>删除</button>复制代码
或者在 constructor 函数中声明
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
}
render() {
return <button onClick={this.handleClick}>test</button>;
}复制代码
或者箭头函数 形式1
handleClick() {
console.log(this)
}
render() {
return <button onClick={() => this.handleClick()}>test</button>
}复制代码
或者箭头函数 形式2
handleClick = () => {
}
render() {
return <button onClick={this.handleClick}>test</button>
}复制代码
郁闷
为什么要 bind 一下 this 呢?这样真的很不舒服?
从this说起
1)默认绑定>
function fn() {
console.log(this)
//Window
}
fn()
复制代码
注:this 的指向默认是全局作用域,即 window ,当然是在非严格模式下。在严格模式下就会是 undefined
"use strict"
function fn() {
console.log(this)
//undefined
}
fn()复制代码
2)隐式绑定
function fn() {
console.log(this)
//{fn: ƒ}
console.log(this.name)
//你我贷
}
var obj = {
"name": "你我贷",
"fn": fn
}
obj.fn()复制代码
注:函数存在对象obj中,并且函数被obj调用,因此this指向obj,特别需要注意的是如下
function fn() {
console.log(this)
//Window
}
var obj = {
"name": "你我贷",
"fn": fn
}
var nwd = obj.fn;
nwd()
复制代码
此时,函数 nwd 是对 obj.fn 的一个引用,严格来说,跟对象 obj 没有任何关系,此时 nwd 的执行就可以运用默认绑定规则,所以它的上下文this 指向 window
3)显示绑定
显示绑定是通过 call 和 apply,bind 方法,强制将 this 指向传入的对象,这种方式也叫做硬绑定
function fn() {
console.log(this)
//{name: "你我贷", fn: ƒ}
console.log(this.name)
//你我贷
}
var obj = {
"name": "你我贷",
"fn": fn
}
fn.call(obj)复制代码
4) new 绑定 构造函数中的this
function Fn(name) {
this.name = name
}
var fn1 = new Fn("你我贷")
console.log(fn1.name)
//你我贷复制代码
注:这是一个非常简单的构造函数书写方式,可以通过new的方式调用来生成实例,构造函数中的this指向构造函数所创造的实例,当通过new方法调用构造函数的时候,构造函数内部的this就指向这实例,并将相应的属性和方法"生成"给这个实例。通过这个方法,生成的实例才能够获取属性和方法。
因此react中
<button onClick={this.handleClick.bind(this)}>test</button>复制代码
因为Class 语法中并没有默认做一个当前 this 绑定,所以会丢失 this 的绑定,在严格模式下,this 是 undefined,bind(this) 之后会创建一个新的函数,并且 this 绑定在当前想要的地方
或者可以使用箭头函数,箭头函数的特点是, 能够自动绑定定义此函数作用域的 this
<button onClick={(e) => this.handleClick(e)}>test</button复制代码