ReactJS: Dropdown-Menüsymbol beim Hover dynamisch aktualisieren

Question

Zuerst habe ich das React-Framework „antd“ und tailwindCSS verwendet, nur um ReactJS zu üben. Nun, dies ist das erste Mal, dass ich dieses Framework verwende. Deshalb habe ich beschlossen, es zunächst mit einem Dropdown-Popup-Menü beim Hover zu versuchen.

Eigentlich weiß ich nicht ganz, wie ich dieses Stadium erreichen soll. Natürlich weiß ich, dass ich mit CSS „hover:“ attr verwenden kann, aber irgendwelche Ideen zur Verwendung von Logik in ReactJS? Außerdem habe ich erfolglos versucht, die Requisite „API-Abschnitt für Dropdown-Menüs“ zu lesen. Selbst wenn ich versuche, die Requisiten in onMouseEnter() 作为 <Dropdown> zu verwenden, schaffe ich es immer noch nicht.

Ich habe diesen Code und dieses Feld geteilt, um den aktuellen Status anzuzeigen.

Dies ist ein Codesandbox-Link

Ich möchte das Symbol des Dropdown-Menüs beim Schweben ändern, indem ich <UpOutlined /> 和 <DownOutlined /> verwende, das ich aus „@antd/icons“ in ReactJS importiert habe, und ich verwende Rückenwind-CSS.

Wie erwartet möchte ich Folgendes: Hover-Menü-Demo für Dummy-Website

Für jede Hilfe wäre ich sehr dankbar, ich versuche seit gestern, dies zu erreichen :(

Answer 1

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

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

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