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'为假）。最好始终将它视为一个或另一个，最好在这里使用数字：

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

Answer 2

我将在setState之外执行逻辑。这可能与setState导致组件每次重新安装/更新的事实有关。像这样：

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

}

Answer 3

您应该检查您的状态是否已经1，并且动作是否为minus，然后什么也不做（return null），否则请执行递增/递减状态

addMinus = (name) => {
  if (this.state.quantity === '1' && name==="minus") {
   return null;
  }
  this.setState({ 
    quantity: name === "add" 
     ? parseFloat(this.state.quantity) + 1 
     : parseFloat(this.state.quantity) - 1 
   })
  }

Answer 4

也许这里的问题已禁用= {this.state.quantity ===“ 1”}。尝试不加引号

其他相同方法

您可以将初始状态数量值设置为零，因此无需每次单击按钮时都解析该值。

addMinus = (name) => {
     let quantity = this.state.quantity;
     if(name == “add”){
         this.setState({
             quantity: quantity+1
         });
      }else{
           this.setState({
             quantity: quantity-1
           });
      }
 }

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

4 个答案: