Heim  >  Fragen und Antworten  >  Hauptteil

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>
P粉131455722P粉131455722450 Tage vor475

Antworte allen(1)Ich werde antworten

  • P粉642919823

    P粉6429198232023-08-19 00:09:28

    您可以将颜色保存在本地存储中。

    // 检查是否设置为黑色
      const [background, setBackground] = useState(localStorage.getItem('wishlistBackground') === 'black');
    
    
    // 每当背景颜色发生变化时,将其保存到本地存储中
      useEffect(() => {
        localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');
      }, [background]);

    Antwort
    0
  • StornierenAntwort