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

  }

}