事件监听
在React.js中监听并不是一件很难的事情,我们只需在监听事件的元素加上属性on click
等等这样的属性就可以了。
我们只需要在h1标签上加上onClick事件,然后onClick后面是一个表达式的插入,这个表达式返回组件
Hello
的一个方法。在这里只要用户每点击一次标题,控制台就会输出你点击了一下我!
。
在 React.js 不需要手动调用浏览器原生的 addEventListener 进行事件监听。React.js 帮我们封装好了一系列的 on* 的属性,当你需要为某个元素监听某个事件的时候,只需要简单地给它加上 on* 就可以了。而且你不需要考虑不同浏览器兼容性的问题,React.js 都帮我们封装好这些细节了。
但是需要注意的是这些事件属性名都必须要用驼峰命名法。
event对象
与普通浏览器一样,事件监听函数会自动传入一个event对象,这个对象和普通浏览器的event对象所包含的方法和属性基本一致。但是React.js中的event对象并不是浏览器所提供的,而是它内部所构建的。
我们来看一下,当用户点击h1
的时候,h1
的inHTML
也就是这是一个标题!就会在控制台打印出来。
关于事件中的this
一般在某个类的实例方法里面的this指的是这个实例本身。但是在下面的这个例子中直接把this给打印出来,你看到会是null或者是undefined。
这是因为 React.js 调用你所传给它的方法的时候,并不是通过对象方法的方式调用(this.handleOnClick),而是直接通过函数调用 (handleOnClick),所以事件监听函数内并不能通过 this 获取到实例。
如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。