React.js采坑系列(一)

事件监听

在React.js中监听并不是一件很难的事情,我们只需在监听事件的元素加上属性on click等等这样的属性就可以了。

图片.png

我们只需要在h1标签上加上onClick事件,然后onClick后面是一个表达式的插入,这个表达式返回组件Hello的一个方法。在这里只要用户每点击一次标题,控制台就会输出你点击了一下我!

图片.png

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

但是需要注意的是这些事件属性名都必须要用驼峰命名法。

event对象

与普通浏览器一样,事件监听函数会自动传入一个event对象,这个对象和普通浏览器的event对象所包含的方法和属性基本一致。但是React.js中的event对象并不是浏览器所提供的,而是它内部所构建的。

我们来看一下,当用户点击h1的时候,h1inHTML也就是这是一个标题!就会在控制台打印出来。

图片.png
图片.png

关于事件中的this

一般在某个类的实例方法里面的this指的是这个实例本身。但是在下面的这个例子中直接把this给打印出来,你看到会是null或者是undefined。

图片.png
图片.png

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

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

图片.png
图片.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,848评论 1 18
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,901评论 25 709
  • 给自己一点空间 一切都会过去的 如今,在我们谈起爱情的时候,都是一副感慨万般的态度,带着淡淡的冷漠,有点忧伤的说道...
    白系阅读 2,241评论 0 0
  • 偶尔从单位纸堆里翻出了这么两张照片。 这是学校的舞台,现在看来确是历史。 第一张应是
    隐之_de1d阅读 1,391评论 0 0
  • 总觉得自己比别人更加敏感,能细微的感受到生活中的种种情愫 但是,总有一个人,骂醒你的矫情,揭开你的虚弱,你的星星点...
    会走路的电梯阅读 1,235评论 0 0