Reactjs 为什么'；增加数量的t工作按钮（模拟喜欢）？如何解决这个问题？

我想制作一个按钮，将右键的数量增加1（模拟喜欢）。此外，我想创建这个只有一个组件。但由于某种原因，代码不起作用。如何解决这个问题

class Like extends React.Component {
  state = {
    like: 0,
  }

  plus() {
    this.setState({
      like: this.state.like + 1,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.plus}>click me</button>
        {this.state.like}
      </div>
    );
  }
}

ReactDOM.render(<Like />, document.getElementById('app'));

类扩展React.Component{
状态={
比如：0，
}
加（）{
这是我的国家({
比如：this.state.like+1，
});
}
render（）{
返回(
点击我
{this.state.like}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

这是因为在

plus（）

函数中，

this

关键字未定义。您需要将它绑定到组件，以便它指向正确的上下文。或者可以使用arrow函数，它具有词法绑定

class Like extends React.Component {
  state = {
    like: 0,
  }

  plus = () => {
    this.setState({
      like: this.state.like + 1,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.plus}>click me</button>
        {this.state.like}
      </div>
    );
  }
}

ReactDOM.render(<Like />, document.getElementById('app'));

类扩展React.Component{
状态={
比如：0，
}
加号=（）=>{
这是我的国家({
比如：this.state.like+1，
});
}
render（）{
返回(
点击我
{this.state.like}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

或者，您可以使用：

class Like extends React.Component {
  constructor(props){
     super(props)
     this.state = {
        like: 0
     }
     this.plus = this.plus.bind(this)
  }

  plus() {
    this.setState({
      like: this.state.like + 1,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.plus}>click me</button>
        {this.state.like}
      </div>
    );
  }
}

ReactDOM.render(<Like />, document.getElementById('app'));

类扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
比如：0
}
this.plus=this.plus.bind（this）
}
加（）{
这是我的国家({
比如：this.state.like+1，
});
}
render（）{
返回(
点击我
{this.state.like}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

此外，还应该有这个.setState（prev=>（{like:prev.like+1}））；