国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用useEffect來(lái)保持背景顏色狀態(tài)的技巧
P粉131455722
P粉131455722 2023-08-18 15:08:53
0
1
624
<p>我正在嘗試保存愿望單切換按鈕的背景顏色,以便當(dāng)用戶(hù)跨頁(yè)面時(shí),按鈕的顏色保持為“黑色”,以向用戶(hù)顯示他們已經(jīng)將該物品保存到愿望單中。</p> <pre class="brush:php;toolbar:false;">const Item = (props) => { const dispatch = useDispatch(); const [background, setBackground] = useState(false); function addToCartHandler(product) { dispatch(addToCart(product)); } function toggleWishlistHandler(product) { dispatch(toggleItem(product)); setBackground((current) => !current); } return ( <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)} style={{ backgroundColor: background ? "black" : "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> ); }; export default Item;</pre>
P粉131455722
P粉131455722

全部回復(fù)(1)
P粉642919823

您可以將顏色保存在本地存儲(chǔ)中。

// 檢查是否設(shè)置為黑色
  const [background, setBackground] = useState(localStorage.getItem('wishlistBackground') === 'black');


// 每當(dāng)背景顏色發(fā)生變化時(shí),將其保存到本地存儲(chǔ)中
  useEffect(() => {
    localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');
  }, [background]);
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板