首頁  >  文章  >  web前端  >  用react怎麼實現收藏功能

用react怎麼實現收藏功能

coldplay.xixi
coldplay.xixi原創
2020-11-17 13:49:223083瀏覽

用react實作收藏功能的方法:透過設定iconStatus取反來實現點擊收藏,程式碼為【const [icoStatus, setIcoStatus] = useState(true)】。

用react怎麼實現收藏功能

用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 &#39;react&#39;
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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn