一.不对this指向做任何改变
class Btn extends React.Component{
render() {
return(<button onClick={this.press()}>开关</button> )
}
press(){console.log(this)}
}
ReactDOM.render( <Btn/>,document.getElementById('example') );
this.press()的this指向当前作用域Btn,而react内部return是执行了React.createElement这个button按钮,因此改变了原本指向windows的this的指向,因此当前环境下是指向undefined,如果return的不是DOM的标签而是另外的组件比如CustomButton,那么this指向的就会是这个另外的组件CustomButton的作用域
二。将当前环境的this绑定在单纯press函数上
onClick={this.press().bind(this)} 这里的this都是Btn作用域,因此press函数内部的this指向也是Btn作用域
也相当于onClick= {function(){console.log(this)}.bind(this)}
三。使用ES6箭头函数书写press函数
onClick={this.press()}
press = () => {console.log(this)}
箭头函数在书写上等同于匿名函数press=function(){},但是实际上箭头函数默认已经将当前作用域绑定了,因此onClick不用bind(this),press函数里面的this指向就已经指向了Btn作用域
也等同于onClick={() => { console.log(this) }}