一 ：bind 方法。
在{}中,這個方法可以幫助我們綁定事件處理器內的 this ，並可以向事件處理器中傳遞參數
class Hello extends React.Component {
//最後一個參數是事件對象
handleClick(param1,param2,event){
alert(param1+"："+param2 + ":"+event);
}
render() {
//通過bind(),可以傳遞單個或多個參數
return <div onClick = {this.handleClick.bind(this,'test','test2')}>
Hello {this.props.name}
</div>;
}
}
二 ： 如果方法只綁定，不傳參，可以使用雙冒號語法，
class Hello extends React.Component {
handleClick(event){
alert(event);
}
render() {
//類似於{this.xxx.bind(this)}
return <div onClick = {::this.handleClick}>
Hello {this.props.name}
</div>;
}
}
三 :constructor構造器內聲明,
在組件的構造器內完成了 this 的綁定，這種綁定方式的好處在於僅需要進行一次綁定，而不需要每次調用事件監聽器時去執行綁定操作
class Hello extends React.Component {
constructor(arg){
super(arg);
//參數傳遞跟一類似
this.handleClick = this.handleClick.bind(this,'test');
}
handleClick(arg,e){
alert(arg+":"+e);
}
render() {
return <div onClick = {this.handleClick}>
Hello {this.props.name}
</div>;
}
}
五 : 使用箭頭函數的特性: 自動綁定了定義此函數作用域的 this
class Hello extends React.Component {
constructor(arg){
super(arg);
}
handleClick(arg,e){
alert(arg+":"+e);
}
render() {
//e爲事件對象
return <div onClick = {(e)=>{this.handleClick('test',e)}}>
Hello {this.props.name}
</div>;
}
}
或者:
class Hello extends React.Component {
constructor(arg){
super(arg);
}
handleClick = (e)=>{
alert(e)
}
render() {
return <div onClick = {this.handleClick}>
Hello {this.props.name}
</div>;
}
}