Reactを使ったコレクション機能の実装方法

react を使用してコレクション関数を実装する方法: クリックして逆の 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 サイトの他の関連記事を参照してください。