javascript - 如果值在ReactJS中小于零，如何停止递减值？

我已经制作了2个按钮，一个用于递增，另一个用于递减。当我单击减号按钮时，它不应显示负值，但在我的情况下，当我单击减号按钮(初始值为0)时，它显示-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;

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

最佳答案

因为您在这里检查错误的情况:

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

它应该是:

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

解决方案:

仅当计数器值大于0时才减小该值。

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

要么

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