react事件监听

作者: 华戈的小书 | 来源:发表于2019-06-04 17:46 被阅读32次

React——事件监听
React事件监听
react事件监听
react事件监听
事件监听
React.js采坑系列（一）
react知识点
React 18 源码学习笔记 2 addEventListen
React 监听键盘事件
js 事件机制

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

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

在 React.js 里面监听事件是很容易的事情，你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性，例如我们现在要给一个按钮加上点击的事件监听：

class Title extends Component {
  handleClick () {
    console.log('Click on title.')
  }

  render () {
    return (
      <button onClick={this.handleClick}>click me</button>
    )
  }
}

点击按钮click me，控制台会打印出Click on title.
react可以像JQuery一样直接使用封装好的on**添加事件监听，而且不需要我们去考虑不同浏览器的兼容性问题，这些react都帮我们处理好了。
事件监听需要加在普通的HTML标签上，如果加在封装的组件上，这需要在子组件内部对出入的事件进行处理。

event对象

和普通浏览器一样，事件监听函数会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React.js 中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。React.js 将浏览器原生的 event 对象封装了一下，对外提供统一的 API 和属性，这样你就不用考虑不同浏览器的兼容性问题。这个 event 对象是符合 W3C 标准（ W3C UI Events ）的，它具有类似于event.stopPropagation、event.preventDefault 这种常用的方法。

class Title extends Component {
  handleClick (e) {
    console.log(e.target.innerHTML);
  }

  render () {
    return (
      <button onClick={this.handleClick}>click me</button>
    )
  }
}

点击按钮click me，控制台会打印出click me.

this对象

...
handleClick () {
    console.log(this);
  }
...

点击按钮click me，发现不能打印出实例对象，这是因为 React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.handleClick），而是直接通过函数调用（handleClick），所以事件监听函数内并不能通过 this 获取到实例。
解决方法：
1、使用bind方法；
2、使用箭头函数；

//1、使用bind方法；
class Title extends Component {
  handleClick (e) {
    console.log(this)
  }

  render () {
    return (
      <button onClick={this.handleClick.bind(this)}>click me</button>
    )
  }
}

这种 bind 模式在 React.js 的事件监听当中非常常见，bind 不仅可以帮我们把事件监听方法中的 this 绑定到当前组件实例上；还可以帮助我们在在渲染列表元素的时候，把列表元素传入事件监听函数当中。

//2、使用箭头函数；
class Title extends Component {
  handleClick (e) {
    console.log(this)
  }

  render () {
    return (
      <button onClick={this.handleClick}>click me</button>
    )
  }
}