ES5中类组件的写法:
import React from 'react';
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}>123</div>
);
}});
export default Contacts;
组件使用时,this是表示实例化后<Contacts />这个组件对象,方法handleClick也能正常调用。
而使用ES6的类声明实例化对象之后,其中的方法比如这里的handleClick就不能用this调用了。错误示例:
class Test entends React.Component {
constructor () {
super();
}
handleClick () {
console.log(this);
}
render () {
return (
<div onClick={this.handleClick}>123</div>
)
}
}
this中是找不到handleClick 方法的。一种改正方法是通过bind()函数绑定。
详见 http://blog.csdn.net/qtwwyl/article/details/76285270
这里,我们不使用这种bind方法手动把handleClick方法绑定在实例化对象下,
即让this能访问handle方法。因为这个方式更消耗性能,而且代码不优美。
我们就利用ES6的箭头函数去简化,让this找到实例化对象的方法。如下:
class Contacts extends React.Component {
constructor(props) {
super(props)
}
handleClick = () => {
console.log(this)
}
render() {
return (
<div onClick={this.handleClick}>123</div>
);
}
}
这样,实例化的组件对象this就能访问到handleClick方法了!