ReactJS: Dynamically update dropdown menu icon on hover

Question

First, I used the "antd" React framework and tailwindCSS just to practice ReactJS. Well, this is my first time using this framework. So I decided to first try using a dropdown popup on hover. Actually, it’s not quite clear how to get to this stage. Of course I know that using CSS I can use "hover:" attr, but any idea of ​​using logic in ReactJS? Also, I tried reading the props "API section for dropdown menus" without success. Even if I try to use onMouseEnter(

P粉894008490 · Answer

You can use the onOpenChange function on Dropdown to get the open status, see Dropdown props. You can use this to set some status of your own. Finally use this state to display different icons.

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

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