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 ?  : }
    
  
);