reactjs - 单击新图标后,如何让我的图标恢复到以前的颜色?
问题描述
我试图让我的图标在点击时改变颜色,我设法用 useState 做到了这一点。但是现在,我似乎无法取消单击或取消以前按下的图标的颜色。我读到这与设置一个状态有关,该状态显示哪个图标处于活动状态,哪个图标不处于活动状态。如果有人知道如何解决这个问题,我将非常感谢任何帮助。到目前为止,这是我的代码,以防万一。
const Submenu: FC<SidebarLinkProps> = ({ item }) => {
const [subnav, setSubnav] = useState(false);
const showSubnav = () => setSubnav(!subnav);
const [changeColor, setChangeColor] = useState('white');
const [activeColor, setActiveColor] = useState(0)
const IconOuter = styled.span`
background-color: ${ changeColor };
border-radius: 5px;
padding: 10px;
width: 44px;
height: 44px;
left: 8px;
top: 8px;
`;
return (
<>
<SidebarLink to={item.path} onClick={showSubnav}>
<IconOuter onClick={() => setChangeColor('#1F4782')}>
{item.icon}
</IconOuter>
</SidebarLink>
</>
);
};
export default Submenu;
解决方案
首先,您需要建立您所在州的近期历史。现在没有开箱即用的钩子,但最容易创建历史记录的是useRef()
钩子
useRef()
钩子的一般形式是:
const refContainer = useRef(initialValue);
useEffect(() => {
refcontainer.current = value
}
方法如下:
const Submenu: FC<SidebarLinkProps> = ({ item }) => {
const [subnav, setSubnav] = useState(false);
const showSubnav = () => setSubnav(!subnav);
const [changeColor, setChangeColor] = useState('white');
const prevColor = useRef();
const [activeColor, setActiveColor] = useState(0)
useEffect(() => {
prevColor.current = changeColor;
});
const IconOuter = styled.span`
background-color: ${ changeColor };
border-radius: 5px;
padding: 10px;
width: 44px;
height: 44px;
left: 8px;
top: 8px;
`;
return (
<>
<SidebarLink to={item.path} onClick={showSubnav}>
<IconOuter onClick={() => {if (prevColor !== changeColor){
setChangeColor(prevColor.current)
}
else {
setChangeColor('#1F4782')
}
}}>
{item.icon}
</IconOuter>
</SidebarLink>
</>
);
};
export default Submenu;
推荐阅读
- java - 从 Notification 启动 Activity 并在 BackPressed 上传递数据
- ios - Swift 4 尝试呈现视图不在窗口层次结构中的 ViewController
- sql - 使用 Chinese_Hong_Kong_Stroke_90_CI_AS 排序规则时 SQL Server 中的模糊匹配
- node.js - Bot builder sdk 4 nodejs 使用哪种代码模式?
- c# - 自定义序列化程序设置
- python - Keras - 输入数组应具有与目标数组相同数量的样本
- visual-studio - 如何安装 Visual Studio 的普通版(非预览版)?
- javascript - 如何在threejs的对象中显示网格?
- python - Python:按十位对数字进行分组的函数
- freemarker - Freemarker 宏参数可以使用其他参数作为默认值吗?