Question

我有一个组件，其中有一个函数可以在单击向上或向下按钮时递增或递减数字。

这就是我所做的：

...

 this.state = {
      score: 50, //The initial number can only go up or down 1
      clicked: 0,
    };

...then

increment() {
    if (!this.state.voted) {
      this.setState({
        score: this.state.score + 1,
        voted: this.state.voted = 1,
      });
    }
  }

  decrement() {
    if (!this.state.voted) {
      this.setState({
        score: this.state.score - 1,
        voted: this.state.voted = 1,
      });
    }
  }
}

现在，只要我点击任何运行任一功能的按钮，它就会停止运行，但只要不上升或下降超过1，我就需要它才能工作

因此，点击增量50可以转到51，减少只能减少到49

我该怎么做？

Answer 1

检查该值是否在正确的范围内，而不是检查是否已经进行了投票。这意味着只有在＆lt;如果＆gt;则仅减少49。

this.state = {
  score: 50, //The initial number can only go up or down 1
  clicked: 0,
};

increment() {
  if (this.state.score < 51) {
    this.setState({
      score: this.state.score + 1,
  });
}

decrement() {
  if (this.state.score > 49) {
    this.setState({
      score: this.state.score - 1,
    });
  }
}

如果分数可以是任何值，则只需保留其他属性，例如defaultScore初始化为与score相同的值，并且您的检查将变为score < (defaultScore + 1)和{{ 1}}。

反应递增/递减功能仅允许1向上或向下

1 个答案: