useEffect を使用して背景色の状態を維持するためのヒント

Question

<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>

1

0

0

P粉131455722

返事

全員に返信(1)

返信します 近い

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

色をローカル ストレージに保存できます。

リーリー

いいねを押す +0

返信を追加 关闭回复

P粉131455722

返事

人気のトピック

詳細>

• CakePHP チュートリアル
• Laravel チュートリアル
• PHP チュートリアル
• Java チュートリアル

人気の記事

• 仮想通貨界の次なるブレイクスター：ソラナの価格急騰、ブロックダグのプレセールマイルストーン、そしてクトシの電撃デビュー
• ドイツテレコム、余剰再生可能エネルギーを利用してビットコインマイニングを開始
• Dragon Age Veilguard で Warden Vault を開ける方法
• Dragon Age: The Veilguard - 竜王の隠れ家 ウォークスルー
• Dragon Age: The Veilguard - 承認と関係ステータスを確認する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417369
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4258323
• 
  JAVA 初心者向けビデオチュートリアル

  2479185

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417369
• 
  JAVA 初心者向けビデオチュートリアル

  2479185
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504088
• 
  Web フロントエンド開発の簡単な紹介

  215314
• 
  PSビデオチュートリアルをゼロからマスターする

  877917

• 
  [Web フロントエンド] Node.js クイック スタート

  6459
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5077
• 
  Go言語実践GraphQL

  4262
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  634
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21717

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [ブートストラップ テンプレート] 有機果物と野菜のサプライヤー Web テンプレート Bootstrap5
• [バックエンドテンプレート] Bootstrap3 多機能データ情報バックグラウンド管理レスポンシブ Web ページ テンプレート-Novus
• [ブートストラップ テンプレート] 不動産リソース サービス プラットフォーム Web ページ テンプレート Bootstrap5
• [ブートストラップ テンプレート] シンプルな履歴書情報 Web テンプレート Bootstrap4
• [ブートストラップ テンプレート] ブートストラップ レスポンシブ ワイドスクリーン ブック教育 Web サイト テンプレート-DREAMLIFE
• [バックエンドテンプレート] MAC スタイルのレスポンシブ ブルー エンタープライズ CMS バックグラウンド管理システム テンプレート
• [バックエンドテンプレート] レスポンシブなグラデーション雰囲気の背景管理システムのウェブサイトのテンプレート-usinessbox
• [ブートストラップ テンプレート] レスポンシブな野菜と果物の店のウェブサイト テンプレート-Organio

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

Answer 1

色をローカル ストレージに保存できます。

リーリー