用react怎么实现收藏功能

用react实现收藏功能的方法:通过设置iconStatus取反来实现点击收藏,代码为【const [icoStatus, setIcoStatus] = useState(true)】。用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(视频)

关于作者: 宏图SEO小编

为您推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注