在 ReactJS 中单击时如何更改心脏(心愿单图标)颜色?
How to change heart ( wishlist icon ) color when clicked in ReactJS?
如何在单击图标时更改图标的颜色并在单击后颜色保持不变。它不会改变他们的状态。
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);
}
}
首先,对于图标条件,如果您的条件是真或假,您就会拥有它,因此拥有该条件是多余的
<RiHeart3Fill className="heart"/>
那么如果你想改变图标的颜色,你基本上需要创建一个函数来修改状态,如下所示:
您正在使用 class 组件,它会像这样:
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
}
}
如果您使用的是功能组件,那么您可以使用 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>
如何在单击图标时更改图标的颜色并在单击后颜色保持不变。它不会改变他们的状态。
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);
}
}
首先,对于图标条件,如果您的条件是真或假,您就会拥有它,因此拥有该条件是多余的
<RiHeart3Fill className="heart"/>
那么如果你想改变图标的颜色,你基本上需要创建一个函数来修改状态,如下所示: 您正在使用 class 组件,它会像这样:
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
}
}
如果您使用的是功能组件,那么您可以使用 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>