javascript - 类型错误 : this is undefined - React JS,

Question

我正在尝试实现一个简单的 React 组件，该组件在单击时更改名称。我在加载具有以下 react 组件的页面时收到错误 Error - TypeError: this is undefined 。错误似乎在 setState 行。

class Layer5 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {buttonstate: false};

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  handleClick(e) {
    e.preventDefault();

    this.setState({buttonstate: !this.state.buttonstate});      
  }

  render() {
    var icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg';

    return (
      <div className="layer5">
        <a href="#" onClick={this.handleClick}><img src={icon} ></img></a>
      </div>
    );
  }
}

Answer 1

要么 a) 使用箭头函数在实例 (this) 上创建词法封闭的属性，要么 b) 使用 .bind。

做一个或另一个。要么 a)

class Layer5 extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = e => {
      e.preventDefault();

      this.setState({buttonstate: !this.state.buttonstate});
    };
  }
}

或b)

render() {
    const icon = this.state.buttonstate ? 'images/image1.png' : 'images/image2.jpg';

    return <div className="layer5">
        <a href="#" onClick={this.handleClick.bind(this)}>
          <img src={icon} >
          </img>
        </a>
      </div>;
  }
}