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

  }

}