javascript - 当数量等于 1 时禁用减号按钮。

Question

我有两个按钮，一个是增加数量，一个是减少数量。

<button type="button" className="btn btn-danger btn-sm btn-details-addminus" disabled={this.state.quantity === '1'} onClick={() => this.addMinus("minus")}><i className="ion-android-remove"></i></button>
<strong>{this.state.quantity}</strong> 
<button type="button" className="btn btn-success btn-sm btn-details-addminus" onClick={() => this.addMinus("add")}><i className="ion-android-add"></i></button>

这是加减法:

addMinus = (name) => {

    this.setState({
        quantity: name === "add" ? parseFloat(this.state.quantity) + 1 :  parseFloat(this.state.quantity) - 1 
    })

}

它首先起作用。当数量等于 1 时减号按钮被禁用。但是当您单击添加按钮并尝试减少它时，该按钮不会在数量等于 1 时返回禁用状态并继续减少到负值。

Answer 1

你的问题是你的 disabled 检查需要一个字符串，但是你的 setState 将它更新为一个数字(并且 1 === '1' 为假)。您最好始终将其视为其中之一，数字在这里可能是更好的选择:

<button type="button" disabled={this.state.quantity === 1} ...>
  <i className="ion-android-remove"></i>
</button>

然后是你的更新处理程序

addMinus = (name) => {
  this.setState(prevState => ({
    quantity: name === "add" ? prevState.quantity + 1 :  prevState.quantity - 1 
  })
}