ReactJS : mettre à jour dynamiquement l'icône du menu déroulant en survol

Question

Tout d'abord, j'ai utilisé le framework React "antd" et tailwindCSS juste pour pratiquer ReactJS. Eh bien, c'est la première fois que j'utilise ce framework. J'ai donc décidé d'essayer d'abord d'utiliser une fenêtre contextuelle déroulante en survol.

En fait, je ne sais pas trop comment arriver à ce stade. Bien sûr, je sais qu'en utilisant CSS, je peux utiliser "hover:" attr, mais des idées sur l'utilisation de la logique dans ReactJS ? De plus, j'ai essayé de lire la prop "Section API pour les menus déroulants" sans succès. Même si j'essaie d'utiliser les accessoires de onMouseEnter() 作为 <Dropdown>, je n'arrive toujours pas à obtenir ça.

J'ai partagé ce code et cette boîte pour afficher l'état actuel.

Ceci est un lien codesandbox

Je souhaite changer l'icône du menu déroulant en survol en utilisant <UpOutlined /> 和 <DownOutlined /> que j'ai importé depuis "@antd/icons" dans ReactJS et j'utilise tailwind CSS.

Comme prévu, je veux ceci : démo du menu survolé pour un site Web factice

Toute aide serait grandement appréciée, j'essaie d'y parvenir depuis hier :(

Answer 1

Vous pouvez utiliser la fonction Dropdown 上的 onOpenChange pour obtenir le statut ouvert, voir Dropdown Props. Vous pouvez l'utiliser pour définir votre propre statut. Utilisez enfin cet état pour afficher différentes icônes.

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

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