将商品添加到购物车后如何更改商品颜色的解决方案？答案

【问题标题】：How to come up with a solution for changin the color of an item after it's been added to a cart?将商品添加到购物车后如何更改商品颜色的解决方案？
【发布时间】：2020-03-02 23:39:03
【问题描述】：

我在将商品添加到购物车后尝试更改它的颜色时遇到了问题。这些是我添加购物车的功能：

function addToCart(newItem) { 
        cartItems.map(item => newItem.type === item.type && removeFromCart(item)) 
        setCartItems(prevItems => [...prevItems, newItem])
    }

function removeFromCart(itemToRemove) { 
    setCartItems(prevItems => prevItems.filter(item => 
       `${item.id}-${item.type}` !== `${itemToRemove.id}-${itemToRemove.type}`)) 
    }

我有一个“选项”组件，里面会显示每个服务：

const serviceElements = servicesList.map(service => 
          <Service key={service.id} 
                   id={service.id} 
                   name={service.name} 
                   type={service.type} 
           /> )

     return (
        <div className={`Options-${context.theme}`}>
            <ul>
                {serviceElements}
            </ul>
        </div>
    )

这是“服务”组件：

<>
      <li onClick={() => { context.cartItems.includes(props) 
                           ? context.removeFromCart(props) 
                           : context.addToCart(props)}}>
                {props.name}
      </li>
</>

我已尝试将类添加到“服务”组件，但显示列表中的所有元素都会更改，而不仅仅是我要更改的元素：

<>
      <li 
          className={context.cartItems.includes(props) ? "notInCart" : "inCart"}  
          onClick={() => { context.cartItems.includes(props) 
                          ? context.removeFromCart(props) 
                          : context.addToCart(props)}}>
                {props.name}
      </li>
</>

我已经在我的 scss 文件中尝试了这两种样式：

.Options-light {
  @extend .TimeGrid-light;
  ul {
    .inCart {
      background-color: blue;
    }
    .notInCart {
      background-color: red;
    }
  }
}

//as well as

.Options-light {
  @extend .TimeGrid-light;
  .inCart {
    background-color: blue;
  }
  .notInCart {
    background-color: red;
  }
}

我无法弄清楚我的问题到底出在哪里

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

为此，您需要state。

class Service extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.addToCart = this.addToCart.bind(this);
    this.state = {
      active: false
    };
  }

  addToCart(context) {
    if (context.cartItems.includes(this.props) {
        context.removeFromCart(this.props);
    } else {
        context.addToCart(this.props);
    }

    this.setState({
      active: !this.state.active
    });
  }

  render({ context }) {
    return (
      <>
        <li className={this.state.active ? "notInCart" : "inCart"} onClick={() => this.addToCart(context)}>
          {props.name}
        </li>
      </>
    )
  }
}

【讨论】：