Javascript 如果ReactJS中的值小于零，如何停止递减？

我做了两个按钮，一个用于递增，另一个用于递减。当我单击减号按钮时，它不应显示负值，但在我的情况下，当我单击减号按钮（最初值为零）时，它显示-1，再次单击时，它显示零。为什么在我单击减号按钮时会发生这种情况？输入框内的值不应在0以下递减

datepicker.js：

import React, { Component } from 'react';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    this.setState({
      counter: this.state.counter + 1
    });
  }

  decrement(){
      if(this.state.counter < 0){
        this.setState({
            counter:0
        });
      }else {
        this.setState({
            counter: this.state.counter - 1
        });
      }
  }


  render() {
    return (
      <div>
        <div id="center">
            <label for="name">Date</label>
            <p></p>
            <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
            <input type="text" id="date" value={this.state.counter}/>
            <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
      </div>
    );
  }
}

export default DatePicker;

import React，{Component}来自'React'；
导入“./datepicker.css”；
类DatePicker扩展组件{
建造师（道具）{
超级（道具）；
此.state={
柜台:0
};
}
增量（）{
这是我的国家({
计数器：this.state.counter+1
});
}
减量{
if（this.state.counter<0）{
这是我的国家({
柜台:0
});
}否则{
这是我的国家({
计数器：this.state.counter-1
});
}
}
render（）{
返回(
日期

+
- 
);
}
}
导出默认日期选择器；

截图： 在screnshot中它显示-1，现在如果我单击它，它将显示零。我不想显示负值下限必须始终为0。

---

您需要更改递减函数的逻辑，因为您正在检查

this.state.counter<0

，当counter为0时，它将为false，只有在下一次单击时才为true。另外，当您使用上一状态更新下一状态时，请使用

功能设置状态

。检查这个

:

为什么在你的情况下不起作用

因为您在此处检查了错误的条件：

if(this.state.counter < 0){...}

---

解决方案：

仅当计数器值大于0时才减小该值。像这样：

decrement(){
   if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
}

或

---

您也可以这样使用。

 decrement = () =>{
    if(this.state.value< 1){
      this.setState({
        value:0
      });
    }else {
      this.setState({
        value: this.state.value- 1
      });
    }
  };

减量=（）=>{
if（此状态值<1）{
这是我的国家({
数值：0
});
}否则{
这是我的国家({
值：this.state.value-1
});
}
};

这将是最简单的方法

import React, {useState} from 'react';

function Counter(){
  const [count, setCount] = useState(0);

  const dec = () => {
    if(count <= 0) {
      return;
    } else {
      setCount(count - 1);
    }
  }

  return (
   <button onClick={dec}> - </button>
   <button onClick={setCount(count + 1)}>  + </button>
 )

}

import React，{useState}来自“React”；
函数计数器（）{
const[count，setCount]=useState（0）；
常数dec=（）=>{
如果（计数它像一个符咒一样工作，谢谢，但在您的解决方案中，只需将计数器：prevCounter.counter-1

更改为

计数器：prevState.counter-1

ohh大错误，复制粘贴错误更新了答案谢谢：）谢谢，它工作正常。指向您答案的链接也很有帮助。很高兴能够提供帮助，我已经更新了您的答案以及您提供给答案的链接欢迎使用Stack Overflow！请不要仅使用源代码进行回答。请尝试提供有关您的解决方案工作原理的详细说明。请参阅：。谢谢

decrement(){
      this.setState(prevState => 
          ({counter: prevState.counter? prevState.counter-1: 0})
      )
}

 decrement = () =>{
    if(this.state.value< 1){
      this.setState({
        value:0
      });
    }else {
      this.setState({
        value: this.state.value- 1
      });
    }
  };

import React, {useState} from 'react';

function Counter(){
  const [count, setCount] = useState(0);

  const dec = () => {
    if(count <= 0) {
      return;
    } else {
      setCount(count - 1);
    }
  }

  return (
   <button onClick={dec}> - </button>
   <button onClick={setCount(count + 1)}>  + </button>
 )

}