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

Question

我在 REACT js 中有购物应用程序。我使用 .map() 函数显示所有产品，并在每个产品前面显示 "ADD to CART" 按钮。单击 ADD to Cart btn 时，它会在本地存储中添加单击的产品 ID，然后我会在 Shopping 中显示这些选定的产品Cart 通过从 localStorage 检索 ID。一切正常很好.

现在我想要的是在单击一次时禁用 "ADD to Cart" 按钮（仅适用于所选产品）。我通过设置状态 来做到这一点，但它实际上禁用了所有产品前面的所有 "ADD to Cart" 按钮 而不是 仅禁用选定的按钮。

我搜索了很多这个问题，我得到的解决方案到处都是 setState 到 true/false 到 enable/disable 按钮。我做到了，但没有用，因为它是为该页面上的 ALL 产品做的。请帮我做什么。

这是我的 REACT JS 代码：

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

您一次只需要禁用一个按钮吗？如果是这样，请将您的状态更改为不是布尔值，而是一个指示哪个按钮被禁用的数字。然后在渲染中，仅当您正在渲染的按钮与状态中的索引相同时才禁用。

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

如果每个按钮都需要同时独立禁用，请将您的状态更改为与备件长度相同的布尔数组，并在渲染方法中让每个按钮查找是否应该在该数组中被禁用。

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

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

How to disable only selected button onClick inside .map() function of REACT js

javascript

reactjs

onclick

setstate

map-function