<p>ウィッシュリストのトグル ボタンの背景色を保存しようとしています。これにより、ユーザーがページ間を移動しても、ボタンの色は「黒」のままになり、項目がウィッシュリストに保存されたことがユーザーに示されます。 </p>
<pre class="brush:php;toolbar:false;">const item = (props) => {
const ディスパッチ = useDispatch();
const [背景、setBackground] = useState(false);
function addToCartHandler(product) {
ディスパッチ(カートに追加(製品));
}
関数 toggleWishlistHandler(product) {
ディスパッチ(toggleItem(製品));
setBackground((現在) => !現在);
}
戻る （
<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}>
<i className="fa-solid fa-heart"></i>
</div>
<i className="fa-solid fa-bag-shopping"<</i>
</div>
</div>
</li>
</div>
);
};
デフォルト項目をエクスポート;</pre>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
色をローカル ストレージに保存できます。
リーリー