Как отключить только выбранную кнопку onClick внутри .map () функции REACT JS - PullRequest
Новая
       329

Как отключить только выбранную кнопку onClick внутри .map () функции REACT JS

0 голосов
/ 17 апреля 2019

У меня есть приложение для покупок в РЕАКЦИЯ JS. Я отображаю все продукты с помощью функции .map (), а также показываю кнопку «ДОБАВИТЬ В КОРЗИНУ» напротив каждого продукта. При нажатии ДОБАВИТЬ в корзину btn добавляется идентификатор продукта, по которому щелкнули, в локальном хранилище, а затем я отображаю эти выбранные продукты в Покупки Корзина , получая идентификаторы из LocalStorage . Все работает отлично .

Теперь мне нужно было отключить кнопку «ДОБАВИТЬ в корзину» (только для выбранного товара), когда она нажата «Один раз». Я сделал это, установив состояние , но оно фактически отключает ВСЕ кнопки «ДОБАВИТЬ в корзину» напротив всех ПРОДУКТОВ вместо отключения только выбранной кнопки.

Я много раз искал эту проблему, и решение, которое я получил везде, это просто setState в true / false для включения / выключения кнопки. Я сделал это, но бесполезно, потому что он делает это для ALL продуктов на этой странице. Пожалуйста, помогите мне, что делать.

Вот мой РЕАКТНЫЙ код 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>

);
  }
}

1 Ответ

2 голосов
/ 17 апреля 2019

Вам нужно только отключить одну кнопку за раз?Если это так, измените свое состояние, чтобы оно было не логическим, а числом, указывающим, какая кнопка отключена.Затем в режиме рендеринга отключите, только если отображаемая кнопка имеет тот же индекс, что и в состоянии. 

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