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的时候，h1的inHTML也就是这是一个标题！就会在控制台打印出来。

图片.png

图片.png

关于事件中的this

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

图片.png

图片.png

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

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

图片.png

图片.png