用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中文網其他相關文章!