Tipps zur Verwendung von useEffect zur Beibehaltung des Hintergrundfarbstatus
<p>Ich versuche, die Hintergrundfarbe der Schaltfläche zum Umschalten der Wunschliste zu speichern, sodass die Farbe der Schaltfläche „schwarz“ bleibt, wenn der Benutzer über Seiten wechselt, um dem Benutzer anzuzeigen, dass er den Artikel auf der Wunschliste gespeichert hat. </p>
<pre class="brush:php;toolbar:false;">const Item = (props) =>
const distribution = useDispatch();
const [Hintergrund, setBackground] = useState(false);
Funktion addToCartHandler(product) {
Versand(addToCart(Produkt));
}
Funktion toggleWishlistHandler(product) {
Versand(toggleItem(product));
setBackground((current) => !current);
}
zurückkehren (
<div>
<li className={classes.item}>
<img src={props.img} alt="Item" className={classes.image} />
<div className={classes.description}>
<p className={classes.title}>{props.title}</p>
<p className={classes.price}>£{props.price}.00</p>
</div>
<div className={classes.actions}>
<div
className={`${classes.addWishlist} ${classes.icon}`}
onClick={() => toggleWishlistHandler(props.product)}
Stil={{
Hintergrundfarbe: Hintergrund ? „Schwarz“ : „Orange“,
}}
>
<i className="fa-solid fa-heart"></i>
</div>
<div
className={`${classes.addCart} ${classes.icon}`}
onClick={() => addToCartHandler(props.product)}
>
<i className="fa-solid fa-bag-shopping"></i>
</div>
</div>
</li>
</div>
);
};
Standardelement exportieren;</pre>