如何在REACT js的.map（）函数中仅禁用选定的按钮onClick

Question

I have shopping Application in REACT js. Im displaying all products using .map() function, and also showing "ADD to CART" button infront of each product. When ADD to Cart btn is clicked, it adds the clicked product ID in local storage then I display these selected products in Shopping Cart by retrieving IDs from localStorage . It all works fine .

Now what I wanted is to disable the "ADD to Cart" button(for selected product only) when its clicked Once. I did it by setting state but it actually Disables ALL "ADD to Cart" Buttons infront of all PRODUCTS instead of disabling only selected button.

I searched this issue alot, and the soltion I got everywhere is just to setState to true/false to enable/disable button. I did it but no use because its doing it for ALL products on that Page. Please help me what to do.

Here is my REACT JS code:

 export default class SpareParts extends Component { constructor() { super() this.state = { spareParts: [], cart: [], inCart: false, disabledButton: false }; this.ViewDeets = this.ViewDeets.bind(this); this.AddToCart = this.AddToCart.bind(this); } ViewDeets= function (part) { this.props.history.push({ pathname: '/partdetails', state: { key: part } }); } AddToCart(param, e) { var alreadyInCart = JSON.parse(localStorage.getItem("cartItem")) || []; alreadyInCart.push(param); localStorage.setItem("cartItem", JSON.stringify(alreadyInCart)); this.setState({ inCart: true, disabledButton: true }) } componentDidMount() { console.log("Showing All Products to Customer"); axios.get('http://localhost/Auth/api/customers/all_parts.php', { headers: { 'Accept': 'application/json, text/plain, */*', 'Content-Type': 'application/json' }} ) .then(response => { this.setState({ spareParts :response.data.records }); }) .catch(error => { if (error) { console.log("Sorry Cannot Show all products to Customer"); console.log(error); } }); } render() { return ( <div id="profileDiv"> {this.state.spareParts.map( part => <Col md="3" lg="3" sm="6" xs="6"> <Card> <Image src={"data:image/png[jpg];base64," + part.Image} id="partImg" alt="abc" style={ {width: "90%"}} /> <h4> {part.Name} </h4> <h5> Rs. {part.Price} </h5> <h5> {part.Make} {part.Model} {part.Year} </h5> <h5> {part.CompanyName} </h5> <button onClick={()=> this.ViewDeets(part) }> View Details </button> <button onClick={() => this.AddToCart(part.SparePartID)} disabled={this.state.disabledButton ? "true" : ""}> {!this.state.inCart ? ("Add to Cart") : "Already in Cart"} </button> </Card> </Col> )} </div> ); } } 

Answer 1

Do you only need to disable one button at a time? If so, change your state to be not a boolean but a number indicating which button is disabled. Then in render, only disable if the button you're rendering has the same index as found in the state.

this.state = {
   disabledButton: -1
   // ...
}

// ...

AddToCart(index, param, e) {
  //...
  this.setState({
    inCart: true,
    disabledButton: index
  })
}


// ...

{this.state.spareParts.map((part, index) => {
   // ...
  <button onClick={() => this.AddToCart(index, part.SparePartID)}
    disabled={this.state.disabledButton === index}>
    {!this.state.inCart ? ("Add to Cart") : "Already in Cart"}
  </button>
})}

If instead each button needs to be independently disableable at the same time, change your state to be an array of booleans with the same length as the spare parts, and in the render method have each button look up whether it should be disabled in that array.

this.state = {
  spareParts: [],
  disabledButtons: [],
  // ...
}

// ...

axios.get('http://localhost/Auth/api/customers/all_parts.php', {
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
    }} )
.then(response =>{
  this.setState({
    spareParts: response.data.records,
    disabledButtons: new Array(response.data.records.length).fill(false)
  });
});

// ...

AddToCart(index, param, e) {
  //...
  this.setState(oldState => {
    const newDisabledButtons = [...oldState.disabledButtons];
    newDisabledButtons[index] = true;
    return {
      inCart: true,
      disabledButtons: newDisabledButtons,
    }
  });
}

// ...

{this.state.spareParts.map((part, index) => {
   // ...
  <button onClick={() => this.AddToCart(index, part.SparePartID)}
    disabled={this.state.disabledButtons[index]>
    {!this.state.inCart ? ("Add to Cart") : "Already in Cart"}
  </button>
})}