资讯专栏INFORMATION COLUMN

React.js 小书 Lesson9 - 事件监听

yanbingyun1990 / 1853人阅读

摘要:在不需要手动调用浏览器原生的进行事件监听。没有经过特殊处理的话,这些的事件监听只能用在普通的的标签上,而不能用在组件标签上。的事件监听方法需要手动到当前实例,这种模式在中非常常用。下一节中我们将介绍小书组件的和。

React.js 小书 Lesson9 - 事件监听

本文作者:胡子大哈
本文原文:http://huziketang.com/books/react/lesson9

转载请注明出处,保留原文链接以及作者信息

在线阅读:http://huziketang.com/books/react

在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClickonKeyDown 这样的属性,例如我们现在要给 Title 加上点击的事件监听:

class Title extends Component {
  handleClickOnTitle () {
    console.log("Click on title.")
  }

  render () {
    return (
      

React 小书

) } }

只需要给 h1 标签加上 onClick 的事件,onClick 紧跟着是一个表达式插入,这个表达式返回一个 Title 自己的一个实例方法。当用户点击 h1 的时候,React.js 就会调用这个方法,所以你在控制台就可以看到 Click on title. 打印出来。

在 React.js 不需要手动调用浏览器原生的 addEventListener 进行事件监听。React.js 帮我们封装好了一系列的 on* 的属性,当你需要为某个元素监听某个事件的时候,只需要简单地给它加上 on* 就可以了。而且你不需要考虑不同浏览器兼容性的问题,React.js 都帮我们封装好这些细节了。

React.js 封装了不同类型的事件,这里就不一一列举,有兴趣的同学可以参考官网文档: SyntheticEvent - React,多尝试不同的事件。另外要注意的是,这些事件属性名都必须要用驼峰命名法。

没有经过特殊处理的话,这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。也就是说,

这样的写法不会有什么效果的。这一点要注意,但是有办法可以做到这样的绑定,以后我们会提及。现在只要记住一点就可以了:这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。

event 对象

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

我们来尝试一下,这次尝试当用户点击 h1 的时候,把 h1innerHTML 打印出来:

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

  render () {
    return (
      

React 小书

) } }

再看看控制台,每次点击的时候就会打印”React 小书“。

关于事件中的 this

一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在上面的 handleClickOnTitle 中把 this 打印出来,你会看到 thisnull 或者 undefined

...
  handleClickOnTitle (e) {
    console.log(this) // => null or undefined
  }
...

这是因为 React.js 调用你所传给它的方法的时候,并不是通过对象方法的方式调用(this.handleClickOnTitle),而是直接通过函数调用 (handleClickOnTitle),所以事件监听函数内并不能通过 this 获取到实例。

如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      

React 小书

) } }

bind 会把实例方法绑定到当前实例上,然后我们再把绑定后的函数传给 React.js 的 onClick 事件监听。这时候你再看看,点击 h1 的时候,就会把当前的实例打印出来:

你也可以在 bind 的时候给事件监听函数传入一些参数:

class Title extends Component {
  handleClickOnTitle (word, e) {
    console.log(this, word)
  }

  render () {
    return (
      

React 小书

) } }

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

如果有些同学对 JavaScript 的 this 模式或者 bind 函数的使用方式不是特别了解到话,可能会对这部分内容会有些迷惑,可以补充对 JavaScript 的 this 和 bind 相关的知识再来回顾这部分内容。

总结

为 React 的组件添加事件监听是很简单的事情,你只需要使用 React.js 提供了一系列的 on* 方法即可。

React.js 会给每个事件监听传入一个 event 对象,这个对象提供的功能和浏览器提供的功能一致,而且它是兼容所有浏览器的。

React.js 的事件监听方法需要手动 bind 到当前实例,这种模式在 React.js 中非常常用。

下一节中我们将介绍《React.js 小书 Lesson10 - 组件的 state 和 setState》。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89665.html

相关文章

  • React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

    摘要:小书最后页面会显示内容组件可以和组件组合在一起,组件内部可以使用别的组件。当页面结构复杂起来,有许多不同的组件嵌套组合的话,组件树会相当的复杂和庞大。下一节中我们将介绍小书事件监听。 React.js 小书 Lesson8 - 组件的组合、嵌套和组件树 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson8 转载请注明出处,保留...

    AbnerMing 评论0 收藏0
  • React.js 小书 Lesson25 - 实战分析:评论功能(四)

    摘要:接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点。把已经发布的评论持久化,存放到浏览器的中。评论显示发布日期,如秒前,分钟前,并且会每隔秒更新发布日期。事件监听方法,。下一节中我们将介绍小书实战分析评论功能五。 React.js 小书 Lesson25 - 实战分析:评论功能(四) 本文作者:胡子大哈本文原文:http://huziketang.com/book...

    mozillazg 评论0 收藏0
  • 写一本关于 React.js小书

    摘要:因为工作中一直在使用,也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来,做成一本开源免费专业简单的入门级别的小书,提供给社区。本书的后续可能会做成视频版本,敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书 本文作者:胡子大哈本文原文:React.js 小书 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huzi...

    Scorpion 评论0 收藏0
  • React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    摘要:多余的操作其实是代码里面的噪音,不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。 React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketan...

    Gemini 评论0 收藏0
  • React.js 小书 Lesson15 - 实战分析:评论功能(二)

    摘要:例如,上面设置了的为,在中被初始化为空字符串。如何向传递的数据父组件只需要通过给子组件传入一个回调函数。当用户点击发布按钮的时候,调用中的回调函数并且将传入该函数即可。下一节中我们将介绍小书实战分析评论功能三。 React.js 小书 Lesson15 - 实战分析:评论功能(二) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/les...

    siberiawolf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<