实现一个很简单的功能，点击文字“开”“关”文字进行切替。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isClosed: false,
}
}
render() {
const { isClosed } = this.state;
return (
<h1 onClick={this.changeToggle} >{isClosed ? '关' : '开'}</h1>
);
}
changeToggle() {
const { isClosed } = this.state;
this.setState({
isClosed: !isClosed,
})
}
}
ReactDOM.render(<MyComponent />, document.querySelector('#app'));
上面代码运行后，点击文字，发现报错了
错误信息.png
错误分析
才开始以为是babel中将方法变为严格模式，所以this指向为undefined，实际不是。
在javascript的基础知识中，类中的方法中this的指向问题
- 类中的方法是挂在类实例的原型对象上的。
- 类中的方法中是严格模式的。
使用类的实例调用类中的方法，this指向的是类的实例
class Person {
study() {
console.warn(this);
}
}
const p = new Person();
p.study(); // 打印的是实例对象p
把实例对象p的study方法复制给变量x，然后调用x方法（属于直接调用），打印的是undefined，直接调用为什么是undefined，而不是windows。原因就是类中的方法是在严格模式下运行的
根本原因：在react的类组件中，render中的<h1 onClick={this.changeToggle} >{isClosed ? '关' : '开'}</h1>将MyComponent的实例上的原型上的changeToggle赋值给了点击事件，然后点击的时候调用（属于直接调用严格模式下的方法），所以为undefined
解决办法：
改变this的指向
<h1 onClick={this.changeToggle.bind(this)} >{isClosed ? '关' : '开'}</h1>
