如何在ReactJS中基于特定的className触发click事件 方法1.没有反模式方法2.减速器中的反模式

如何解决如何在ReactJS中基于特定的className触发click事件 方法1.没有反模式方法2.减速器中的反模式

因此，我有2个用于将商品添加到购物车的按钮。该商品有2个价格（1/2公斤价格和1公斤价格）。我想要单击1 / 2kg按钮时，它添加价格为1 / 2kg的商品，单击1kg按钮时，它添加价格为1kg的商品。到目前为止，两个按钮的价格都增加了1/2公斤，因为这是我决定添加1公斤商品之前的唯一价格。这是我的代码如下：

PS：价格是1/2公斤价格，price2是1公斤价格。

const CollectionItem = ({ item,addItem }) => {
    const { name,price,price2,imageUrl } = item;

    return (
        <div className="collection-item">
            <div className="image" style={{ backgroundImage: `url(${imageUrl})` }} />
            <div className="collection-footer">
                <span className="name">{name}</span>
                <div className="prices">
                    <strong>
                        <span className="price">{price}</span>
                    </strong>
                    <strong>
                        <span className="price2">{price2}</span>
                    </strong>
                </div>
            </div>
            <div className="add-buttons">
                <CustomButton
                    className="custom-button"
                    onClick={() => addItem(item,'price')}
                    inverted
                >
                    Add 1/2kg
                </CustomButton>
                <CustomButton
                    className="custom-button"
                    onClick={() => addItem(item,'price2')}
                    inverted
                >
                    Add 1kg
                </CustomButton>
            </div>
        </div>
    );
};

const mapdispatchToProps = (dispatch) => ({
    addItem: (item) => dispatch(addItem(item)),});

addItem是一个动作创建者，我用来更新我的reducer，该减速器使用了我创建来更新的cartUtils文件中的以下功能：

export const addItemToCart = (cartItems,cartItemToAdd) => {
    const existingCartItem = cartItems.find(
        (cartItem) => cartItem.id === cartItemToAdd.id
    );

    if (existingCartItem) {
        return cartItems.map((cartItem) =>
            cartItem.id === cartItemToAdd.id
                ? { ...cartItem,quantity: cartItem.quantity + 1 }
                : cartItem
        );
    }

    return [...cartItems,{ ...cartItemToAdd,quantity: 1 }];
};

我的操作是：

export const addItem = (item) => ({
    type: CartActionTypes.ADD_ITEMS,payload: item,});

我的减速器是：

case CartActionTypes.ADD_ITEMS:
            return {
                ...state,cartItems: addItemToCart(state.cartItems,action.payload),};

希望你的好人能帮助我！

解决方法

我看到两种可能的方式：

• 代替addItem（），创建两个单独的函数，其中仅对使用0.5kg onClick动作的item.price起作用；对于第二个函数，对于1kg，则使用item.price2。

或

• 在addItem（）函数中添加第二个参数，以便可以在特定操作中更改应使用的价格，例如：

const addItem = (item,priceType) => {
  switch (priceType) {
    case 'price': 
       // 0,5kg 
    case 'price2': 
       // 1kg 
    default: //default case
  }
}

...
<div>
  <CustomButton
    ...
    onClick={() => addItem(item,'price')}
  >
    Add 1/2kg
  </ CustomButton>
  <CustomButton
    ...
    onClick={() => addItem(item,'price2')}
  >
    Add 1kg
  </ CustomButton>
</div>

---

REDUX

我建议您使用不带反图案的方法1。我还添加了方法2，保持了原作者的思维方式。

方法1.没有反模式

1. 在React CollectionItem 组件中，使用mapStateToProps，因此您将从商店中获得cartItems作为道具。
2. 重写函数触发了onClick事件，因此它将对cartItems进行所有必要的更改，然后返回实际使用中的更新的cartItems列表。
3. Reducer只需获取更新的参数，然后将其传递给STORE，而不会发生任何突变。

const CollectionItem = ({ item,addItem,cartItems }) => {
  const { name,price,price2,imageUrl } = item;

  const addItemToList = (item,priceType) => {
    // addItemToCart() logic 
    // cartItems argument is available as a props from STORE
    addItem(updatedCartItems); //call action
  }
  return (
    ...
      
    <CustomButton
      ...
      onClick={() => addItemToList(item,'price')}
    >
      Add 1/2kg
    </ CustomButton>
  )
}

const mapStateToProps = (state) => ({
  cartItems: state.cartItems
});
const mapDispatchToProps = (dispatch) => ({
    addItem: (updatedCartItems) => dispatch(addItem(updatedCartItems)),});
export default connect(mapStateToProps,mapDispatchToProps)(CollectionItem);

动作创建者

export const addItem = (updatedItems) => ({
    type: CartActionTypes.ADD_ITEMS,payload: updatedItems,});

减速器

case CartActionTypes.ADD_ITEMS:
  return {
    ...state,cartItems: action.payload,// PURE REDUCER
  };

方法2.减速器中的反模式

在更新addItem(item,'price')时，它会收到两个参数，现在是时候更新动作创建者和reducer了，以便它能够接受第二个参数'price'或'price2'。

动作创建者-添加了priceType

export const addItem = (item,priceType) => ({
    type: CartActionTypes.ADD_ITEMS,payload: item,priceType
});

减速器-传递priceType

注意！在减速器中使用addItemToCart()是反模式。根据{{​​3}}，您切勿在reducer内对参数进行突变，而应保持纯净。

case CartActionTypes.ADD_ITEMS:
  return {
    ...state,cartItems: addItemToCart(state.cartItems,action.payload,action.priceType),};

然后addItemToCart(cartItems,cartItemToAdd,priceType)可以使用switch(priceType)，因此价格类型会有所不同。