手動綁定
bind方法
此方法可以綁定事件處理器內(nèi)的this乾戏,并可以向事件方法傳參
class test extends Component {
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={this.handleEdit.bind(this, param)}>編輯</button>
}
}
// 如果不傳參可用雙冒號::
<button onClick={::this.handleEdit}>編輯</button>
構(gòu)造器內(nèi)聲明
class test extends Component {
constructor(props){
super(props);
this.handleEdit = this.handleEdit.bind(this);
}
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={this.handleEdit}>編輯</button>
}
}
箭頭函數(shù)
方法1
class test extends Component {
handleEdit = (e) => {
console.log(e)
}
render() {
return <button onClick={this.handleEdit}>編輯</button>
}
}
方法2
class test extends Component {
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={() => this.handleEdit(param)}>編輯</button>
}
}
自動綁定
es5寫法脸侥, React.createClass