用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（视频）

以上就是用react怎么实现收藏功能的详细内容，更多内容请关注技术你好其它相关文章！