React 事件处理

React事件处理需要注意的地方大概整理了一点，留个爪爪，利人利己。

React 元素的事件处理和DOM元素类似，但是又一点语法上的不同。

1.React 事件绑定属性的命名采用驼峰式写法，而不是小写；
2.如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）；
3.你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 preventDefaule(构造函数） ；
4.当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法；
5.必须谨慎对待JSX回调函数中的this。类的方法默认是不会绑定this的。如果你忘记绑定this。handleClick 并把它传入 onClinck,当你调用这个函数的时候，this的值回事 undefined . 这并不是React 的特殊行为，它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没在方法后添加（），你应该为这个方法绑定this；

如果不喜欢使用bind，这里有两种方式可以解决

1.可以使用属性初始化器来正确绑定回调函数；
2.使用回调函数。

import React, { Component } from 'react';
class Role extends Component {
   // 构造函数传参 props
   constructor(props){
       super(props);
       // 当前数据为 默认设置开关为true
       this.state = {isToggleOn:true}
       // 这边绑定是必要的，这样this才能在回调函数中使用
       // 当前点击
       this.handleClick = this.handleClick.bind(this);
   }
   // 点击事件，点击时候取反
   handleClick(){
       this.setState(prevState=>({
           isToggleOn:!prevState.isToggleOn
       }));
   }
 render() {
   return (
       // 绑定点击事件
     <button onClick={this.handleClick}>
     {/* 点击的时候，当前开关如果是开就变为关，如果是关就变为开 */}
         {this.state.isToggleOn ? 'ON':'OFF'}
     </button>
   );
 }
}

export default Role;

import React, { Component } from 'react';

// 使用箭头函数确保‘this’绑定在函数中
class Role extends Component {
    handleClick (){
        console.log(this)
    }

  render() {
    return (
        // 使用 React 的时候，通常不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器，
        // 仅仅需要在这个元素初始渲染的时候提供一个监听器。
      <button onClick={(e)=> this.handleClick(e)}>
        click me
      </button>
    );
  }
}

export default Role;