时间戳

首页 > 解决方案 > 我正在研究 React，当用户使用 useState Hook 单击此图标时，我想在 Ionicon Icon 上填充红色

css - 我正在研究 React，当用户使用 useState Hook 单击此图标时，我想在 Ionicon Icon 上填充红色

问题描述

当我尝试做。它改变图标的​​背景颜色

//这是我的代码

    export default function Preview() {
        const [color, setColors] = React.useState("");
        const handleClickButton = () => {
            setColors(
                "red"
            
            )
          };

       return(

     <div>
        <a className="icons mr-3" onClick={()=> handleClickButton()} ><ion-icon name="heart-outline" 
        style= {{backgroundColor:color}}></ion-icon></a>
     </div>

)
}

当我单击它时，像这样显示我 在此处输入图像描述

标签： cssreactjsionic-framework

解决方案

看起来像您期望的那样将图标更改为红色？再说一次，你还没有完全解释你的目标是什么。

编辑：尝试使用颜色而不是背景颜色来定位心脏颜色：

 <div>
    <a className="icons mr-3" onClick={()=> handleClickButton()} ><ion-icon name="heart-outline" 
    style= {{color:color}}></ion-icon></a>
 </div>

推荐阅读