DOM 事件处理

• addEventListener
• onclick = function(){}
• 纯小写

React 元素也采用类似于 DOM0 标准中的事件属性定义的方法
JSX click 小驼峰
直接创建 React 元素的方法

React.createElement(
  'button',
  {
    onClick: {this.doSth}
  },
    'click'
)

React 的事件对象

SyntheticBaseEvent 合成基础事件对象
由 React 重新定义，这个 SBE 是遵守 W3C 事件对象的规范的，不存在任何浏览器兼容性问题

为什么 React 要装事件处理直接在 React 元素上绑定？

React 一直认为事件处理跟视图是有程序上的直接关系的
事件处理和视图写在一直可以更加直观的表述视图与逻辑的关系
更加好维护

this 指向

默认处理函数的 this 为 undefined
ES6 class模块默认是不对事处理函数进行 this 的再绑定

解决 this 指向的办法

1. bind(this) 推荐

   1. 在构造器

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

   2. 在视图标记中

      render(){
      return (
      <div>
      <button onClick={this.doSth.bind(this)}>Click</button>
      </div>
      )
      }

2. 回调 + 箭头函数

   render(){
    return (
      <div>
      <button onClick={() => this.doSth()}>Click</button>
    </div>
   )
   }

   当 render 函数每次执行的时候，都会创建一个新的回调

   • 给子组件的属性进行传递函数的时候，每次都要新建一个回调
     子组件每次都会接收一个新的函数，那么有可能触发子组件的 render

可以使用一种实验性的 class fields 写法：推荐

doSth = () => {
}
render(){
    return (
      <div>
      <button onClick={this.doSth}>Click</button>
    </div>
  )
}

点击查看【codepen】

事件参数的问题

点击查看【codepen】