单击新图标后，如何让我的图标恢复到以前的颜色？答案

【问题标题】：How do I get my icon to revert back to its previous color after I've clicked a new icon?单击新图标后，如何让我的图标恢复到以前的颜色？
【发布时间】：2021-09-28 19:58:48
【问题描述】：

我试图让我的图标在点击时改变颜色，我设法用 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;

【问题讨论】：

标签： reactjs icons setstate use-state

【解决方案1】：

首先，您需要建立您所在州的近期历史。现在没有开箱即用的钩子，但最容易创建历史记录的是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;

【讨论】：