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

Question

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

Answer 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;

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

How do I get my icon to revert back to its previous color after I've clicked a new icon?

reactjs

icons

setstate

use-state