• 技术文章 >web前端 >js教程

    用react怎么实现收藏功能

    coldplay.xixicoldplay.xixi2020-11-17 13:49:22原创31

    用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中文网,转载请注明出处,感谢您的尊重!
    专题推荐:react 收藏功能
    上一篇:jquery如何判断浏览器是否是ie 下一篇:jquery如何检查字符串中是否包含指定字符?
    第14期线上培训班

    相关文章推荐

    • web网站收藏功能• ajax收藏功能怎么实现?• jquery之ztree实现右键收藏功能• php如何实现收藏功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网