반응을 사용하여 수집 기능을 구현하는 방법

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(비디오)

위 내용은 반응을 사용하여 수집 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!