react 实现收藏小星星功能收藏，取消收藏

最新推荐文章于 2023-02-10 09:59:34 发布

爱吃排骨

最新推荐文章于 2023-02-10 09:59:34 发布

阅读量2.2k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_36947128/article/details/104619211

版权

react 专栏收录该内容

36 篇文章 4 订阅

订阅专栏

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>
     </>
    )}