摘要:在不需要手动调用浏览器原生的进行事件监听。没有经过特殊处理的话,这些的事件监听只能用在普通的的标签上,而不能用在组件标签上。的事件监听方法需要手动到当前实例,这种模式在中非常常用。下一节中我们将介绍小书组件的和。
React.js 小书 Lesson9 - 事件监听
本文作者:胡子大哈
本文原文:http://huziketang.com/books/react/lesson9
转载请注明出处,保留原文链接以及作者信息
在线阅读:http://huziketang.com/books/react
在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性,例如我们现在要给 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 的标签上,而不能用在组件标签上。也就是说,
和普通浏览器一样,事件监听函数会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React.js 中的 event 对象并不是浏览器提供的,而是它自己内部所构建的。React.js 将浏览器原生的 event 对象封装了一下,对外提供统一的 API 和属性,这样你就不用考虑不同浏览器的兼容性问题。这个 event 对象是符合 W3C 标准( W3C UI Events )的,它具有类似于event.stopPropagation、event.preventDefault 这种常用的方法。
我们来尝试一下,这次尝试当用户点击 h1 的时候,把 h1 的 innerHTML 打印出来:
class Title extends Component { handleClickOnTitle (e) { console.log(e.target.innerHTML) } render () { return (React 小书
) } }
再看看控制台,每次点击的时候就会打印”React 小书“。
关于事件中的 this一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在上面的 handleClickOnTitle 中把 this 打印出来,你会看到 this 是 null 或者 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 - 组件的组合、嵌套和组件树 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson8 转载请注明出处,保留...
摘要:接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点。把已经发布的评论持久化,存放到浏览器的中。评论显示发布日期,如秒前,分钟前,并且会每隔秒更新发布日期。事件监听方法,。下一节中我们将介绍小书实战分析评论功能五。 React.js 小书 Lesson25 - 实战分析:评论功能(四) 本文作者:胡子大哈本文原文:http://huziketang.com/book...
摘要:因为工作中一直在使用,也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来,做成一本开源免费专业简单的入门级别的小书,提供给社区。本书的后续可能会做成视频版本,敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书 本文作者:胡子大哈本文原文:React.js 小书 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huzi...
摘要:多余的操作其实是代码里面的噪音,不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。 React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketan...
摘要:例如,上面设置了的为,在中被初始化为空字符串。如何向传递的数据父组件只需要通过给子组件传入一个回调函数。当用户点击发布按钮的时候,调用中的回调函数并且将传入该函数即可。下一节中我们将介绍小书实战分析评论功能三。 React.js 小书 Lesson15 - 实战分析:评论功能(二) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/les...
阅读 2701·2021-09-01 10:30
阅读 1628·2019-08-30 15:52
阅读 937·2019-08-29 18:40
阅读 1086·2019-08-28 18:30
阅读 2328·2019-08-23 17:19
阅读 1251·2019-08-23 16:25
阅读 2655·2019-08-23 16:18
阅读 2945·2019-08-23 13:53