Javascript 停止上一步和下一步按钮增量在某个值-ReactJS

得到了一个小脚本编码，当点击上一个和下一个按钮时，它会向左或向右递增100px

我想知道是否有一种方法可以使脚本在达到某个点（例如-500px或+500px）时停止增加值

构造函数（道具）{
超级（）；
此.state={
背景颜色：0
};
this.handleClickRight=this.handleClickRight.bind（this）；
this.handleClickLeft=this.handleClickLeft.bind（this）；
}
handleClickRight（e）{
e、 预防默认值（）；
这是我的国家({
bgColor:this.state.bgColor-100
})
}
左把手（e）{
e、 预防默认值（）；
这是我的国家({
bgColor:this.state.bgColor+100
})
}
render（）{
返回(

在设置状态时，您可以使用

Math.max

和

Math.min

。还要先检查该值是否已处于最小值或最大值，以避免不必要的重新渲染：

handleClickRight(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== -500) this.setState({
    bgColor: Math.max(bgColor - 100, -500)
  })
}

handleClickLeft(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== 500) this.setState({
    bgColor: Math.min(bgColor + 100, 500)
  })
}

---

太棒了！工作完美干净。非常感谢。

handleClickRight(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== -500) this.setState({
    bgColor: Math.max(bgColor - 100, -500)
  })
}

handleClickLeft(e) {
  e.preventDefault();
  const { bgColor } = this.state;
  if (bgColor !== 500) this.setState({
    bgColor: Math.min(bgColor + 100, 500)
  })
}