ReactJS：动态更新悬停时的下拉菜单图标

Question

首先，我使用“antd”React框架和tailwindCSS只是为了练习ReactJS。嗯，这是我第一次使用这个框架。因此，我决定首先尝试在悬停时使用下拉弹出菜单。

其实，并不太清楚如何达到这个阶段。我当然知道使用 CSS，我可以使用“hover:” attr，但是有没有在 ReactJS 中使用逻辑的想法？另外，我尝试阅读道具“下拉菜单的 API 部分”，但没有成功。即使我尝试使用 onMouseEnter() 作为 <Dropdown> 中的道具，仍然无法得到这个。

我已共享此代码和框以显示当前状态。

这是一个codesandbox链接

我想使用 <UpOutlined /> 和 <DownOutlined /> 更改悬停时下拉菜单的图标，这是我从 ReactJS 中的“@antd/icons”导入的内容，我使用的是 tailwind CSS。

正如预期的那样，我想要这样的：虚拟网站的悬停菜单演示

任何帮助将不胜感激，从昨天开始我就在努力实现这一目标:(

Answer 1

您可以使用 Dropdown 上的 onOpenChange 函数来获取打开状态，请参见下拉道具。您可以使用它来设置您自己的某些状态。最后使用该状态来显示不同的图标。

const [isOpen, setIsOpen] = useState(false);

return (
  
    
      Hover me, Click menu item
      {isOpen ?  : }
    
  
);