Question

我已经制作了两个按钮，一个用于增量，另一个用于减少。当我点击减号按钮时，它不应显示负值，但在我的情况下，当我点击减号按钮（最初值为零）时，它显示-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。

Answer 1

您递减函数需要更改逻辑，因为您正在检查this.state.counter < 0当计数器为0时哪个将为false，并且仅在下一次单击时才会为真。此外，当您使用先前的状态更新下一个状态时，请使用functional setState。检查一下

When to use functional setState：

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

<强> Working codesandbox

Answer 2

您也可以这样使用。

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

Answer 3

这是最简单的方法

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

}

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

3 个答案: