react事件绑定(学这一篇就够了)

React元素的事件处理和Dom元素的很相似,但是有一点语法上的不同

• React事件的命名采用的是小驼峰式, 例如(onClick),而不是纯小写(onclick)
• 使用JSX语法的时候,需要传入一个函数作为事件处理函数,而不是一个字符串

* 保证是一个函数
* 如果需要使用this关键词，保证this指向

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props)
    this.handlerClickFn=this.handlerClick
  }

  handlerClick(e){
    console.log(1,this);
  }
  render() {
    return (
      <button onClick={this.handlerClickFn}>点击</button>
    );
  }
}

export default App;

         这里使用的 es5 的绑定事件的语法,可以看到打印出来的this是undefined所以可以看出来this指向的问题,这也是十分重要的,这时候我们就想到es5中改变this指向的方法

import React, { Component } from 'react';

class App extends Component {
  constructor(props){