React初探（四）

事件处理

1.react中的事件经过react处理合成而来，所以在调用时有自己的写法，例如onClick、onFocus等

2.react中的事件处理函数分为以下几种写法：

1.在调用的地方添加this绑定，此种情况在传参时默认第二个参数是自定义传参，后续参数为react合成时间event

handleClick (params, e) {
  //params: 自定义传参
  // e: react自定义事件参数
}
<button onClick={this.handleClick.bind(this, '我是参数')}>点我试试</button>

2.利用箭头函数生成匿名函数，在匿名函数中调用事件处理函数，此种情况需要显示的传递事件处理对象

// 需要在箭头函数中接受事件对象e并传递给事件处理函数
<button onClick={(e) => { this.handleClick('我是传参', e); }}>点我试试</button>

3.在构造函数中为事件处理函数绑定this,这种情况无法传递自定义参数，函数接受的第一个参数就是事件处理对象e

constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

4.如果你正在使用实验性的 public class fields 语法，你可以使用 class fields 正确的绑定回调函数：

  handleClick = () => {
    console.log('this is:', this);
  }