Question

早上好

我敢肯定，解决方案非常简单，我试图防止数量计数器低于1，但是由于这种状态，如果我不断减少，它将变成负数。有谁知道如何解决这个问题？在此先多谢，如果我不清楚，请告诉我。

新年快乐！

谢谢！

class FormQuantity extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
  }

  increment = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  decrement = () => {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
        <div className="form-quantity">
        
          <button
              className="btn"
              onClick={this.decrement}>
              <span>&minus;</span>
            </button>

            <span className="form-quantity__counter">{this.state.counter}</span>
            
            <button
              className="btn"
              onClick={this.increment}>
              <span>&#43;</span>
            </button>
            
            
        </div>
    );
  }
}

export default FormQuantity;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您有2种方法可以做到这一点，最好的解决方案可能涉及到这两种方法：

在减量功能中检查值：

decrement = () => {
  this.setState({
    counter: Math.max(0, this.state.counter - 1)
  });
};

在无法递减时禁用递减按钮：

<button
    className="btn"
    onClick={this.decrement}
    disabled={this.state.counter <= 1}
>
    <span>&minus;</span>
</button>

第一个是关于良好做法并具有安全成分的（例如，您不能进行非法/不合逻辑的行为）。第二个是良好的UI惯例，用户无法执行这些操作，而视觉效果表明了这一点。

Answer 2

我检查了计数是否等于1，如果返回了，那似乎可行。

Answer 3

您可以在 setState 中使用prevState进行检查并相应地更新状态。

增量：

increment = () => {
        this.setState(prevState => ({    
                isToggleOn: prevState.counter >= 1 ? prevState.counter + 1 : prevState.counter;
        }));
      };

减量：

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

Answer 4

@Meir答案非常有效。在这里，我使用的是@Meir所使用的Math.max方法，其代码更少。

因此，只有一个既可以递增也可以递减并检查负值的函数。

toggleValue = (value) => {
  this.setState({
    counter: Math.max(0, value)
  })
}

  render() {
    let {counter} = this.state
    return (
        <div className="form-quantity">
          <button
              className="btn"
              onClick={() => this.toggleValue(counter-1)}>
              <span>&minus;</span>
            </button>
            <span className="form-quantity__counter">{counter}</span>            
            <button
              className="btn"
              onClick={() => this.toggleValue(counter+1)}>
              <span>&#43;</span>
            </button>
            
            
        </div>
    );
  }
}

这是现场demo

希望它会有所帮助：）

Answer 5

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

toggleValue = () => {
  this.setState(prevState => 
    ({counter: prevState.counter}))
}

  render() {
    let {counter} = this.state
    return (
        <div className="form-quantity">
          {partsInt(this.state.counter) > 0 ? <button
              className="btn"
              onClick={() => this.toggleValue(counter-1)}>
              <span>&minus;</span>
            </button> : ''}
            <span className="form-quantity__counter">{counter}</span>            
            <button
              className="btn"
              onClick={() => this.toggleValue(counter+1)}>
              <span>&#43;</span>
            </button>
        </div>
    );
  }
}

在这里，我没有显示用于减小数字的按钮。并且它的值大于或等于1，然后将其添加可见。

如何防止状态递增/递减计数器低于1

5 个答案: