用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中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论