在 ReactJS 中单击时如何更改心形（愿望清单图标）颜色？答案

【问题标题】：How to change heart ( wishlist icon ) color when clicked in ReactJS?在 ReactJS 中单击时如何更改心形（愿望清单图标）颜色？
【发布时间】：2021-04-30 17:15:39
【问题描述】：

如何在单击时更改图标的颜色，并且单击后颜色保持不变。它不会改变它们的状态。

  import {RiHeart3Fill} from 'react-icons/ri';
  import './Details.scss';




  <div className="details__info">
                        <div className="details__incDec">
                            <span className="dec" onClick={decQuantity}><BsDash /></span>
                            <span className="quantity">{quantity}</span>
                            <span className="inc" onClick={() => setQuantity(quantity + 1)}><BsPlus /></span>
                           {localStorage.getItem('email') 
                            ? <button  style={{outline: 'none',fontFamily: "'Comfortaa', cursive"}} className="btn-default"  onClick={cartData}>add to cart</button>
                            : <button  style={{outline: 'none',fontFamily: "'Comfortaa', cursive"}} className="btn-default" onClick={signUpToBuy}>add to cart</button>
                            }
                            {localStorage.getItem('email') 
                            ?   <RiHeart3Fill className="heart"/>
                            :   <RiHeart3Fill className="heart"/>
                            }
                       </div>
  </div>

Details.scss

.heart{
   font-size: 35px;
   color:rgb(182, 173, 173);
   margin-top: 7px;
    width: 70px;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    &:hover{
        color: rgb(192, 39, 39);
    }
}

【问题讨论】：

标签： css reactjs react-icons

【解决方案1】：

首先，对于图标条件，如果您的条件为真或假，则您拥有它，因此条件是多余的

  <RiHeart3Fill className="heart"/>

然后，如果您想更改图标颜色，则基本上需要创建一个函数来修改状态，如下所示：你正在使用一个类组件，它会是这样的：

constructor(props) {
    super(props);
    this.state = {
  toggleHeart = false
    };
this.changeColor= this.changeCoor.bind(this);
  }
    changeColor = () =>{
     this.setState({toggleHeart: !toggleHeart})
    }`enter code here`
    <RiHeart3Fill className={
            this.state.toggleHeart ? 'heart active' : 'heart'
          } onClick={changeColor}/>

对于一个功能组件，它几乎是相似的：

const  [toggleHeart, setToggleHeart] = useState(false)
    
    changeColor = useCallback(() =>{
     setToggleHeart(!toggleHeart)
    },[])
    <RiHeart3Fill className={
            toggleHeart ? 'heart active' : 'heart'
          } onClick={changeColor}/>

在 scss 文件中，您将有如下内容：

.heart{
   font-size: 35px;
   color:rgb(182, 173, 173);
   margin-top: 7px;
    width: 70px;
    outline: none;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    &:hover{
        color: rgb(192, 39, 39);
    }
   &.active {
    color: ///color when active
   }
}

【讨论】：

谢谢，一切正常。你能告诉我为什么我们在这里使用回调吗？
你的意思是在功能组件中？主要有助于提高性能
@ZainZahid 我将功能组件中的this.setState 编辑为setToggleHeart 抱歉这里的错字

【解决方案2】：

如果您使用的是功能组件，那么您可以使用useState

 const [iconColor,setIconColor] = useState("white");

你可以这样做：


  <div className="details__info">
                        <div className="details__incDec">
                            <span className="dec" onClick={decQuantity}><BsDash /></span>
                            <span className="quantity">{quantity}</span>
                            <span className="inc" onClick={() => setQuantity(quantity + 1)}><BsPlus /></span>
                           {localStorage.getItem('email') 
                            ? <button  style={{outline: 'none',fontFamily: "'Comfortaa', cursive"}} className="btn-default"  onClick={cartData}>add to cart</button>
                            : <button  style={{outline: 'none',fontFamily: "'Comfortaa', cursive"}} className="btn-default" onClick={signUpToBuy}>add to cart</button>
                            }
                            {localStorage.getItem('email') 
                            ?   <RiHeart3Fill className="heart"/>
                            :   <RiHeart3Fill  className="heart" style={{color:iconColor}} onClick={()=>setIconColor("red")}/>
                            }
                       </div>
  </div>

【讨论】：