Got it, let's tackle this! To toggle the icon on your button when clicked (while keeping the addToBasket functionality intact), you'll need to use React state to track whether the item has been added to the cart. Here's a straightforward implementation:

Step 1: Add State to Track Cart Status #

First, import the useState hook if you haven't already, and create a state variable to keep track of whether the item is in the cart. This will determine which icon shows up.

Step 2: Update the Button's Icon Based on State #

Use conditional rendering to switch between your "add to cart" icon (plusCart) and a "success/added" icon (I’ll assume you have one called checkCart—replace this with your actual second icon asset).

Step 3: Toggle State When the Button is Clicked #

Update the state either directly in your addToBasket function (if it's synchronous) or after your async logic completes (like an API call to add the item).

Here's the full code example:

import { useState } from 'react';
import { Button } from 'antd';

// Import your icon assets
import plusCart from './path/to/plus-cart-icon.png'; // Replace with your actual path
import checkCart from './path/to/check-cart-icon.png'; // Replace with your second icon path

function ProductCard() { // Replace with your component name
  // State to track if the item is in the cart
  const [isItemInCart, setIsItemInCart] = useState(false);

  // Your existing addToBasket function (adjust as needed)
  const addToBasket = () => {
    // Your original logic to add the item to the cart
    console.log('Item added to basket!');

    // Toggle the state to switch icons
    setIsItemInCart(prevState => !prevState);
  };

  // If addToBasket is asynchronous (e.g., calling an API), use this version instead:
  // const addToBasket = async () => {
  //   try {
  //     // Call your API to add the item
  //     await fetch('/api/add-to-cart', {
  //       method: 'POST',
  //       body: JSON.stringify({ /* item data */ }),
  //       headers: { 'Content-Type': 'application/json' }
  //     });
  //     // Only toggle the icon if the API call succeeds
  //     setIsItemInCart(prevState => !prevState);
  //   } catch (error) {
  //     console.error('Failed to add item to cart:', error);
  //     // Optionally show an error message here
  //   }
  // };

  return (
    <Button
      style={{ backgroundColor: "transparent" }}
      type="primary"
      // Conditionally render the icon based on state
      icon={isItemInCart ? <img src={checkCart} alt="Item in cart" /> : <img src={plusCart} alt="Add to cart" />}
      onClick={addToBasket}
    />
  );
}

export default ProductCard;

Extra Tips: #

• Persist State: If you want the icon state to stay after a page refresh, initialize the state with localStorage:

  const [isItemInCart, setIsItemInCart] = useState(() => {
    return localStorage.getItem('itemInCart') === 'true';
  });
  
  // Update localStorage whenever the state changes
  useEffect(() => {
    localStorage.setItem('itemInCart', isItemInCart.toString());
  }, [isItemInCart]);
  

• Global State: If you’re managing a full cart across your app, use a global state manager like React Context or Redux instead of local component state. This ensures the icon state syncs with the actual cart state everywhere in your app.

内容的提问来源于stack exchange，提问作者tiedantebreak