react-类组件的方法this指向

实现一个很简单的功能，点击文字“开”“关”文字进行切替。

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

在javascript的基础知识中，类中的方法中this的指向问题

1. 类中的方法是挂在类实例的原型对象上的。
2. 类中的方法中是严格模式的。
   使用类的实例调用类中的方法，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>