react事件 报错Cannot read property 'setState' of undefined

import React, { Component } from "react";

export class TestHanderClick extends Component {
  //有构造器state写在里面, 构造器中必须要有super并且传递参数
  constructor(props) {
    super(props);
    this.state = {
      num: 100,
    };
  }

  myChuFa() {
    alert("被触发了");
    // 报错 Cannot read property 'setState' of undefined
    // 说明state这个对象是未定义的,如何解决呢

    this.setState({
      num: this.state.num + 10,
    });
  }

  render() {
    //   this是这个组件
    return (
      <div>
        <div>{this.state.num}</div>
        <div onClick={this.myChuFa}> 我是事件</div>
      </div>
    );
  }
}

export default TestHanderClick;


初次看这个代码是没有问题的,但是你会点击后会发现报错
报错 Cannot read property 'setState' of undefined
说明state这个对象是未定义的,如何解决呢
只需要将
<div onClick={this.myChuFa}> 我是事件</div>

改成为
<div onClick={this.myChuFa.bind(this)}> 我是事件</div>
posted @ 2020-08-17 22:51  何人陪我共长生  阅读(1021)  评论(0编辑  收藏  举报