事件定义

• 事件名要以 on 开头, 后面跟上事件名称, 使用小驼峰命名
• 共有以下 4 中方式

import React, {Component} from 'react';

class App extends Component {
  handlerClick2() {
    console.log('方式2');
  }

  handlerClick3 = (event) => {
    console.log('方式3');
  }

  handlerClick4 = () => {
    console.log('方式4');
  }
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('方式1');
        }}>add1</button>

        {/*此时 handlerClick 不加括号表示需要点击后才能执行, 加了括号则直接执行, 点击后则没有反应*/}
        <button onClick={ this.handlerClick2 }>add2</button>

        <button onClick={ this.handlerClick3 }>add3</button>

        <button onClick={() => {
          this.handlerClick4()
        }}>add4</button>
      </div>
    );
  }
}

export default App;

定义方式区别

• 如上面的代码
• 方式1: 适合函数代码逻辑比较少的情况下使用
• 方式2: 不推荐使用, 因为如果在函数中使用到了 this 的话, 则需要手动修改 this 指向问题, 即如下代码

    <button onClick={ this.handlerClick2.bind(this) }>add2</button>

• 方式3: 没有 this 指向的问题, 但是, 如果函数需要传递参数的话, 就不行了, 但是, 在函数中, 会有一个默认参数, 表示的是事件对象
• 方式4: 比较推荐, 没有 this 指向和传递参数的问题, 同时, 函数定义的时候, 可以使用箭头函数, 也可以使用函数声明的方式, 两种方式都可以, 因为 this 指向和函数的调用者有关, 和函数的定义无关, 而在调用的时候, 已经使用了箭头函数, 所以就不存在 this 指向问题.