在constructor中的箭头函数fn1中使用this
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.fn1=()=>{
console.log(this)
}
}
// fn2(){
// console.log(this)
// }
render() {
return(
<div>
<button onClick={this.fn1}>点击使用fn1</button>
{/* <button onClick={this.fn2}>点击使用fn2</button> */}
</div>
)
}
}
可以直接打印出this,并且正确
在class中直接定义方法fn2中
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.fn1=()=>{
console.log(this,"这是fn1")
}
}
fn2(){
console.log(this,"这是fn2")
}
render() {
return(
<div>
<button onClick={this.fn1}>点击使用fn1</button>
<button onClick={this.fn2}>点击使用fn2</button>
</div>
)
}
}
无法直接打印this
解决办法:绑定bind或者call,因为该方法是声明式函数所以不能直接绑定bind因此得在下面标签绑定事件中使用bind(this),将this传入进去,就可以正常使用了。
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.fn1=()=>{
console.log(this,"这是fn1")
}
}
fn2(){
console.log(this,"这是fn2")
}
render() {
return(
<div>
<button onClick={this.fn1}>点击使用fn1</button>
<button onClick={this.fn2.bind(this)}>点击使用fn2</button>
</div>
)
}
}
在class中直接定义箭头函数
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.fn1=()=>{
console.log(this,"这是fn1")
}
}
fn2(){
console.log(this,"这是fn2")
}
fn3=()=>{
console.log(this,"这是fn3")
}
render() {
return(
<div>
<button onClick={this.fn1}>点击使用fn1</button>
<button onClick={this.fn2.bind(this)}>点击使用fn2</button>
<button onClick={this.fn3}>点击使用fn3</button>
</div>
)
}
}
可以直接访问this
在constructor中使用定义式函数fn4、
import React, { Component } from 'react'
export default class App extends Component {
constructor(){
super()
this.fn1=()=>{
console.log(this,"这是fn1")
}
this.fn4= function(){
console.log(this,"这是fn4")
}
}
fn2(){
console.log(this,"这是fn2")
}
fn3=()=>{
console.log(this,"这是fn3")
}
render() {
return(
<div>
<button onClick={this.fn1}>点击使用fn1</button>
<button onClick={this.fn2.bind(this)}>点击使用fn2</button>
<button onClick={this.fn3}>点击使用fn3</button>
<button onClick={this.fn4}>点击使用fn4</button>
</div>
)
}
}
不能正常取到this
解决办法:因为他是定义式函数,所以可以不用在onclick哪里添加bind,可以直接在他定义的后面,添加一个.bind()然后就可以正常使用this了