Reactを使ったコレクション機能の実装方法
Nov 17, 2020 pm 01:49 PMreact を使用してコレクション関数を実装する方法: クリックして逆の iconStatus を設定して収集します。コードは [const [icoStatus, setIcoStatus] = useState(true)] です。
react を使用してコレクション関数を実装する方法:
1. iconStatus 反転を設定してクリックして収集します。 , お気に入りを解除する機能
import React,{useState} from 'react' function Model(){ const [icoStatus, setIcoStatus] = useState(true) //点击收藏按钮 const iconSouCangData = (event, props) => { setIcoStatus(!icoStatus) } return( <> <span className={icoStatus? " icon-soucang2 soucang-color" : "icon-soucang2"} onClick={(e) => icoStatusData(e,props)}></span> </> )}
2. 以下は循環リストを収集するためのものです. お気に入りを解除する
import React,{useState} from 'react' function Model(){ const [icoStatus, setIcoStatus] = useState(true) //点击收藏按钮 const iconSouCangData = (event, props) => { setIcoStatus(!icoStatus) } return( <> <span className={iconSouCang ? "opts-icon icon-soucang2 soucang-color" : "icon-hide"} onClick={(e) => iconSouCangData(e,props)}></span> <span className={iconSouCang ? "icon-hide" : "opts-icon icon-soucang"} onClick={(e) => iconSouCangData(e,props)}></span> </> )}
関連する無料学習の推奨事項: JavaScript (ビデオ )
以上がReactを使ったコレクション機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











React と WebSocket を使用してリアルタイム チャット アプリを構築する方法

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法

React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法

React コード デバッグ ガイド: フロントエンドのバグをすばやく見つけて解決する方法

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法

React レスポンシブ デザイン ガイド: アダプティブ フロントエンド レイアウト効果を実現する方法
