当Quantity等于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:

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'为false).你最好不断地将它视为一种或另一种,而数字可能是更好的选择:

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