javascript - Disable Minus Button when Quantity is equal to 1. - Stack Overflow

admin管理员组

文章数量:1352192

I have two buttons, One is for incrementing the quantity, and one is for decrementing.

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

this is addMinus:

addMinus = (name) => {

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

}

it works at first. The minus button is disabled when quantity is equal to 1. but when you click the add button and try to decrement it, the button does not go back to being disabled when quantity is equal to 1 and continues to decrement to negative values.

I have two buttons, One is for incrementing the quantity, and one is for decrementing.

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

this is addMinus:

addMinus = (name) => {

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

}

it works at first. The minus button is disabled when quantity is equal to 1. but when you click the add button and try to decrement it, the button does not go back to being disabled when quantity is equal to 1 and continues to decrement to negative values.

• javascript
• reactjs
• babeljs

Share Improve this question Follow asked Aug 17, 2018 at 1:40 eibersjieibersji 1,21644 gold badges3131 silver badges5454 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Your problem is that your disabled check is expecting a string, but your setState updates it as a number (and 1 === '1' is false). You'd be better off consistently treating it as one or the other, and number is probably a better choice here:

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

And then for your update handler

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

You should check if your state already 1 and action is minus then do nothing (return null), in other case do increment/decrement state

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

Perhaps the issue is here disabled={this.state.quantity===“1”}. Try without quotes

Other way of doing the same

You can have initial state quantity value as zero and so you no need to parse the value every time the button is clicked.

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

I would do the logic outside of the setState. It could be related to the fact that setState causes the ponent to remount/update each time. So something like this:

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

}

本文标签： javascriptDisable Minus Button when Quantity is equal to 1Stack Overflow