React 手動實現 this 的綁定的幾種方法

一 ：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>;

  }

}