代码之家 › 专栏 › 技术社区 › David Trinh

使用相同的onClick按钮将计数器递增到2(范围0-2),然后从2减回到0

reactjs javascript

David Trinh · 技术社区 · 6 年前

我在逻辑上无法实现这一点。我的计数将减少和增加1,所以我将被困在1,永远不会回到零。

using react: jsfiddle

计数器:0 1 2

单击同一on click()按钮,每次单击计数器时计数器将从2变回0。

计数器:2 1 0;

3 回复 | 直到 6 年前

skylerfenn 6 年前

只有计数,没有逻辑方法来确定增量或减量。可以添加布尔状态跟踪增量与减量。

onClick(e) {
  let count = this.state.increment ? this.state.count + 1 : this.state.count - 1;

  let increment = this.state.increment;

  if (count === 0) {
    increment = true;
  } else if (count >= 2) {
    increment = false;
  }

  this.setState({
    count,
    increment,
  });
}

https://jsfiddle.net/69z2wepo/264102/

kyun 6 年前

onClick(e) {
  let tmp = this.state.count;
  tmp++;
  if(tmp > 2){
    tmp = 0;
  }
  this.setState({
    count: tmp
  })
}

我认为这不是最好的答案,但它会激励你。

khofaai 6 年前

你能看看这个例子吗: jsfiddle

 onClick(e) {


  if(this.state.action == '+') {
     this.setState({
        count: this.state.count + 1
    });
  } else {
     this.setState({
       count: this.state.count - 1
     });
  }

  if(this.state.count == 1) {
      if( this.state.action == '+') {

        this.setState({
            action: '-'
        });
      } else {
        this.setState({
            action: '+'
        });
      }
  }

}

推荐文章