react事件监听

在react.js里监听事件很容易，需要给被监听的事件元素加上属性类似于onclick，onkeydown这样的属性，例如我们现在要给title 加上点击时间的监听

class Title extends Component {handleClickOnTitle () {console.log('Click on title.')}render () {return (
学代码的小臻
)}
}

react中的event对象

和我们的普通浏览器一样，事件监听函数会被自动传入一个event对象，浏览器中的对象是浏览器提供的，但是react中的对象是由react.js提供的，因为event是符合w3c的标准，所以就不用考虑不同浏览器的兼容性问题了

class Title extends Component {handleClickOnTitle (e) {console.log(e.target.innerHTML)}render () {return (
学代码的小臻
)}
}

所以当我点击我们的h1时，就会将h1中的innerHTML进行打印

react中时间的this

在类实例中，this指向这个实例本身，但是在点击事件中将this打印出来会看到时null或者是undefined

react.js调用方法时不是将对象方法的方式来进行调用的而是直接调用函数，所以事件监听函数内并不能够通过this来获取实例

如果想在事件函数中使用当前实例需要手动将实例方法bind到当前实例上再传入到react.js中

class Title extends Component {handleClickOnTitle (e) {console.log(this)}render () {return (
学代码的小臻
)}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！