react 事件绑定 es5/es6

// vscode shift + ctrl + v 预览

es 5 写法

无参函数的绑定

• first methods
  1. 定义函数:

  handleClick(e) { // e - 事件对象
      e.preventDefault();
      // doSomething ...
  }
  

  2. constructor 中绑定函数的执行上下文

  this.handleClick = this.handleClick.bind(this);
  

  3. jsx 中的调用

  <button onClick={this.hanleClick} />
  

• second methods
  1. 定义函数

  // 同上
  

  2. jsx 中的调用

  <button onClick={this.hanleClick.bind(this)} />
  

有参数的绑定

• only one
  1. 定义函数

  handleClick(param1, param2, e) {
      e.preventDefault();
      // do something ...
  }
  

  注意此时无论多少个参数， e 一定放在最后

  2. jsx 中调用

  <button onClick={this.hanleClick.bind(this, 'x', 'xx')} />
  

es 6 写法

无参数的绑定

• only one
  1. 定义函数：

  handleClick = (e) => {
      e.preventDefault();
      // do something ...
  }
  

  2. jsx 中调用

  <button onClick={this.hanleClick} />
  

  比起 es 5 中的无参数函数的绑定调用， es 6 不需要使用 bind 函数；

有参数函数的绑定

• first methods
  1. 定义函数：

  handleClick = (param1, e) => {
      e.preventDefault();
      // do something ...
  }
  

  2. jsx 中调用

  <button onClick={this.hanleClick.bind(this, 'x')} />
  

  有参数时，在绑定时依然要使用 bind；

  并且参数一定要传，不然仍然存在 this 指向错误问题；

• second methods
  1. 定义函数：

  handleClick = (param1, e) => {
      // do something ...
  }
  

  2. jsx 中调用

  <button onClick={() => this.handleClick('c')} />
  // 如果需要对 event 对象进行处理的话，需要写成下面的格式
  <button onClick={(e) => this.handleClick('c', e)} />