react 事件绑定 es5/es6

// vscode shift + ctrl + v 预览

es 5 写法

无参函数的绑定

• first methods
  1. 定义函数:

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

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

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

  1. jsx 中的调用

• second methods
  1. 定义函数

  // 同上

  1. jsx 中的调用

  有参数的绑定

• only one
  1. 定义函数

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

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

  1. jsx 中调用

es 6 写法

无参数的绑定

• only one
  1. 定义函数：

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

  1. jsx 中调用

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

  有参数函数的绑定

• first methods
  1. 定义函数：

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

  1. jsx 中调用

  有参数时，在绑定时依然要使用 bind；
  并且参数一定要传，不然仍然存在 this 指向错误问题；

• second methods
  1. 定义函数：

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

  1. jsx 中调用

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

转载于:https://www.cnblogs.com/cc-freiheit/p/10707084.html