用react如何實現收藏功能

小編給大家分享一下用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>
     </>
    )}

看完了這篇文章，相信你對用react如何實現收藏功能有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！