错误为：'changeMes​​sage'未定义no-undef

Question

我是React的新手。我在React JS中编写了以下代码，但是我的代码无法编译。

class Message extends Component
{
    constructor()
    {
        super(); //Since we are extending another class, it is mandatory
        //this.state is an object
        this.state = {
            message: "Initial Message"
        }
    }
    changeMessage(){
        this.setState(
            {
                message: "Changed Message"
            }
        )

    }
    render()
    {
        return( 
            <div>
            <h1>
                {this.state.message}
            </h1>
            <button onClick = {() => changeMessage()}>Click to change message</button>
            </div>
            )
    }
}

export default Message

在为按钮添加onClick功能之前，它运行良好。

Answer 1

您需要绑定功能或使用箭头功能

class Message extends Component {
  constructor() {
    super(); //Since we are extending another class, it is mandatory
    //this.state is an object
    this.state = {
        message: "Initial Message"
    }
  }

  changeMessage=()=>{
    this.setState(
        {
            message: "Changed Message"
        }
    )
  }
  render() {
    return( 
      <div>
        <h1>
          {this.state.message}
        </h1>
        <button onClick = {() => this.changeMessage()}>Click to change message</button>
      </div>
    )
  }
}

export default Message