【React整理系列】事件处理

一、React事件命名

不同于Vue，React的事件处理机制更加接近于原生事件的写法、

对于事件类型的指定，基本上是采用原生的写法(但是具体事件回调函数的指定有所不同)：

<button onClick={activateLasers}>  Activate Lasers
</button>

即使用on+大写事件类型的形式

二、React事件参数：event对象

React中会默认传入event对象，这个event对象遵循W3C规范（也就是原生类似）

三、React阻止html元素的默认行为

在原生JavaScript中，如果要阻止元素的默认行为（比如说点击a标签默认打开链接），是在回调函数的最后return false

但是在React，无法使用此方法，必须调用event对象中的preventDefault方法

比如：

function ActionLink() {
    // 使用闭包指定对应回调函数
    function handleClick(e) {    
      e.preventDefault();    
      console.log('The link was clicked.');  
  }
  	return (
    <a href="#" onClick={handleClick}>      Click me
    </a>
  );
}

四、在class组件和function组件中指定处理函数的通常格式

• 在class组件中，我们通常将回调函数作为class对象的成员函数：

比如官方文档中这段代码：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    /