您的位置是:网站首页>Javascript编程Javascript编程

用react怎么实现收藏功能

少儿编程网2020-11-18 13:54:29Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介用react实现收藏功能的方法:通过设置iconStatus取反来实现点击收藏,代码为【const[icoStatus,setIcoStatus]=useState(true)】。用react实现收藏功能的方法:1、通过设置iconStatus取反来实现点击收藏,取消收藏的功能importReact

用react实现收藏功能的方法:通过设置iconStatus取反来实现点击收藏,代码为【const [icoStatus, setIcoStatus] = useState(true)】。F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

用react实现收藏功能的方法:F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1、通过设置iconStatus取反来实现点击收藏,取消收藏的功能 F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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、下面这种是针对循环的列表进行收藏,取消收藏F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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(视频)F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以上就是用react怎么实现收藏功能的详细内容,更多请关注少儿编程网其它相关文章!F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网F5y少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

用react怎么实现收藏功能

      匿名评论
    • 评论
    人参与,条评论
    用react怎么实现收藏功能

微信公众号

免费视频教程

先知道