reactjs - 为什么增加数量的按钮不起作用（模拟喜欢）？如何解决这个问题？

Question

我想制作一个按钮，将权利的数量增加 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'));

https://jsfiddle.net/vt2rwyse/10/

标签： reactjs

Answer 1

这是因为在plus()函数中，this关键字是未定义的。您需要将它绑定到您的组件，以便它指向正确的上下文。或者您可以使用具有词法绑定的箭头函数。

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'));

或者，您可以使用：

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'));