React組件綁定this的四種方式
用react進(jìn)行開發(fā)組件時(shí)吩蔑，我們需要關(guān)注一下組件內(nèi)部方法this的指向，react定義組件的方式有兩種凿叠，一種為函數(shù)組件，一種為類組件憎亚，類組件內(nèi)部可以定義一些方法兆蕉，這些方法的this需要綁定到組件實(shí)例上吩愧，這里總結(jié)了一下顾彰，一共有四種方案：
第一種方案极阅，在構(gòu)造函數(shù)內(nèi)部使用bind綁定this，這樣做的好處是涨享，避免每次渲染時(shí)都要重新綁定筋搏，代碼如下：
import React, {Component} from 'react'
?
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
//在構(gòu)造函數(shù)中綁定this
this.handleClick = this.handleClick.bind(this)
}
?
handleClick (e) {
console.log(this.state.message)
}
?
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)}
}
第二種方案同樣是用bind，但是這次不再構(gòu)造函數(shù)內(nèi)部使用厕隧，而是在render函數(shù)內(nèi)綁定奔脐，但是這樣的話，每次渲染都需要重新綁定吁讨，代碼如下：
import React, {Component} from 'react'
?
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
?
handleClick (name, e) {
console.log(this.state.message + name)
}
?//在render函數(shù)中綁定
render () {
return (
<div>
<button onClick={ this.handleClick.bind(this, '趙四') }>Say Hello</button>
</div>
)
}
}
第三種方案是在render函數(shù)中髓迎，調(diào)用方法的位置包裹一層箭頭函數(shù)，因?yàn)榧^函數(shù)的this指向箭頭函數(shù)定義的時(shí)候其所處作用域的this建丧，而箭頭函數(shù)在render函數(shù)中定義排龄，render函數(shù)this始終指向組件實(shí)例，所以箭頭函數(shù)的this也指向組件實(shí)例茶鹃，代碼如下：
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
?
handleClick (e) {
console.log(this.state.message)
}
?//通過(guò)箭頭函數(shù)綁定this
render () {
return (
<div>
<button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
</div>
)
}
第四種方案：屬性初始化器語(yǔ)法
class Test extends React.Component {
handleClick = () => {
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)
}
}
注意：
上述第四種方案僅限于執(zhí)行函數(shù)無(wú)需入?yún)⒌那闆r，onClick事件如果包含() 艰亮，就會(huì)變成執(zhí)行函數(shù)闭翩，頁(yè)面加載后函數(shù)會(huì)自動(dòng)執(zhí)行。
解決方案：
//1.在箭頭函數(shù)中執(zhí)行函數(shù)
class Test extends React.Component {
handleClick = (name) => {
console.log(name)
}
render () {
return (
<div>
<button onClick={()=>{this.handleClick('tom')}}>Say Hello</button>
</div>
)
}
}
//2.手動(dòng)綁定this
class Test extends React.Component {
handleClick = (name) => {
console.log(name)
}
render () {
return (
<div>
<button onClick={()=>{this.handleClick.bind(this, 'tom')}}>Say Hello</button>
</div>
)
}
}
