react事件綁定this的幾種寫法
正常我們不綁定this,this是null
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = { }
}
clickHandler() {
console.log("this",this);
}
render() {
return (
<div>
<h1>我是App頁面</h1>
<button onClick={ this.clickHandler }>點擊按鈕</button>
</div>
)
}
}
image.png
1: this.clickHandler.bind(this)
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = {}
}
clickHandler() {
console.log("this",this);
}
render() {
return (
<div>
<h1>我是App頁面</h1>
<button onClick={ this.clickHandler.bind(this) }>點擊按鈕</button>
</div>
)
}
}
2: this.clickHandler = this.clickHandler.bind(this)
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = {}
this.clickHandler = this.clickHandler.bind(this)
}
clickHandler() {
console.log("this",this);
}
render() {
return (
<div>
<h1>我是App頁面</h1>
<button onClick={ this.clickHandler }>點擊按鈕</button>
</div>
)
}
}
3: () => this.clickHandler()
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = {}
}
clickHandler() {
console.log("this",this);
}
render() {
return (
<div>
<h1>我是App頁面</h1>
<button onClick={ () => this.clickHandler() }>點擊按鈕</button>
</div>
)
}
}
4: clickHandler = () => { console.log("this",this); } (工作中推薦這種寫法)
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = {}
}
clickHandler = () => { console.log("this",this); } // 推薦寫法
render() {
return (
<div>
<h1>我是App頁面</h1>
<button onClick={ this.clickHandler }>點擊按鈕</button>
</div>
)
}
}
4中綁定this展示效果
image.png