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

Question

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

日期选择器.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;

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

Answer 1

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

因为您在这里检查了错误的条件：

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})
      )
}