ReactJS: Kemas kini ikon menu lungsur turun secara dinamik pada tuding

Question

Mula-mula, saya menggunakan rangka kerja "antd" React dan tailwindCSS hanya untuk mengamalkan ReactJS. Nah, ini kali pertama saya menggunakan rangka kerja ini. Jadi saya memutuskan untuk mencuba menggunakan pop timbul jatuh turun pada tuding dahulu.

Sebenarnya, saya tidak begitu tahu bagaimana untuk mencapai tahap ini. Sudah tentu saya tahu bahawa menggunakan CSS saya boleh menggunakan "hover:" attr, tetapi ada idea untuk menggunakan logik dalam ReactJS? Juga, saya cuba membaca prop "bahagian API untuk menu lungsur turun" tanpa berjaya. Walaupun saya cuba menggunakan props dari onMouseEnter() 作为 <Dropdown> saya masih tidak dapat ini.

Saya telah berkongsi kod dan kotak ini untuk menunjukkan status semasa.

Ini adalah pautan kotak pasir kod

Saya mahu menukar ikon menu lungsur pada tuding menggunakan <UpOutlined /> 和 <DownOutlined /> yang saya import daripada "@antd/icons" dalam ReactJS dan saya menggunakan CSS tailwind.

Seperti yang dijangka, saya mahukan ini: Tuding menu demo untuk tapak web palsu

Sebarang bantuan amatlah dihargai, saya telah berusaha untuk mencapai ini sejak semalam :(

Answer 1

Anda boleh menggunakan fungsi Dropdown 上的 onOpenChange untuk mendapatkan status terbuka, lihat Dropdown Props. Anda boleh menggunakan ini untuk menetapkan beberapa status anda sendiri. Akhir sekali gunakan keadaan ini untuk memaparkan ikon yang berbeza.

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

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