今天在擼代碼的時候發(fā)現(xiàn)了 在react項目中this的貓膩。
我發(fā)現(xiàn)在使用React中 如果使用ES6的Class extends寫法 如果onClick綁定一個方法 需要bind(this),
而使用React.createClass方法 就不需要.
那這又是為什么呢
上網(wǎng)查了資料發(fā)現(xiàn):React.createClass 是es5的寫法默認是綁定了bind方法裳瘪，而es6中 新增加了class侣姆，綁定的方法需要綁定this答姥，如果是箭頭函數(shù)就不需要綁定this莫鸭，用箭頭的方式
第一種寫法:
handleClick(e) {
console.log(this);
}
render() {
return (
<div>
<span onClick={this.handleClick.bind(this)}>點擊</span>
</div>
);
}
第二種寫法：
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
console.log(this);
}
render() {
return (
<div>
<spanonClick={this.handleClick}>點擊</span>
</div>
);
}
第三種寫法：
handleClick = (e) => {
// 使用箭頭函數(shù)(arrow function)
console.log(this);
}
render() {
return (
<div>
<h1 onClick={this.handleClick}>點擊</h1>
</div>
);
}```