React.js 小书 Lesson9 - 事件监听
React.js 小书 Lesson9 - 事件监听
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 class Title extends Component { handleClickOnTitle () { console.log('Click on title.') } render () { return ( <h1 onClick={this.handleClickOnTitle}>React 小书</h1> ) } } 只需要给 在 React.js 不需要手动调用浏览器原生的 React.js 封装了不同类型的事件,这里就不一一列举,有兴趣的同学可以参考官网文档: SyntheticEvent - React,多尝试不同的事件。另外要注意的是,这些事件属性名都必须要用驼峰命名法。 没有经过特殊处理的话,这些 event 对象和普通浏览器一样,事件监听函数会被自动传入一个 我们来尝试一下,这次尝试当用户点击 class Title extends Component { handleClickOnTitle (e) { console.log(e.target.innerHTML) } render () { return ( <h1 onClick={this.handleClickOnTitle}>React 小书</h1> ) } } 再看看控制台,每次点击的时候就会打印”React 小书“。 关于事件中的 this一般在某个类的实例方法里面的 ... handleClickOnTitle (e) { console.log(this) // => null or undefined } ... 这是因为 React.js 调用你所传给它的方法的时候,并不是通过对象方法的方式调用( 如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 class Title extends Component { handleClickOnTitle (e) { console.log(this) } render () { return ( <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1> ) } }
你也可以在 class Title extends Component { handleClickOnTitle (word,e) { console.log(this,word) } render () { return ( <h1 onClick={this.handleClickOnTitle.bind(this,'Hello')}>React 小书</h1> ) } } 这种 如果有些同学对 JavaScript 的 总结为 React 的组件添加事件监听是很简单的事情,你只需要使用 React.js 提供了一系列的 React.js 会给每个事件监听传入一个 React.js 的事件监听方法需要手动 下一节中我们将介绍《React.js 小书 Lesson10 - 组件的 state 和 setState》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |