ReactJS: ホバー時のドロップダウン メニュー アイコンを動的に更新する

Question

まず、ReactJS の練習のために、「antd」React フレームワークと tailwindCSS を使用しました。さて、このフレームワークを使用するのは初めてです。そこで、まずホバー時のドロップダウン ポップアップを使用してみることにしました。

実は、この段階に到達する方法はあまり明確ではありません。もちろん、CSS を使用すると「hover:」属性を使用できることは知っていますが、ReactJS でロジックを使用することについて何かアイデアはありますか?また、プロップ「ドロップダウンメニューのAPIセクション」を読み込もうとしましたが、成功しませんでした。 <Dropdown> の小道具として onMouseEnter() を使用しようとしても、これを取得できません。

現在のステータスを示すためにこのコードとボックスを共有しました。

これはコードサンドボックスのリンクです

<UpOutlined /> と <DownOutlined /> を使用して、ホバー時のドロップダウン メニューのアイコンを変更したいのですが、これは "@ から得たものです。 antd" in ReactJS /icons" を使用してコンテンツをインポートするには、tailwind CSS を使用します。

予想どおり、次のようなものが欲しいです: ダミー Web サイトのホバー メニューのデモ

助けていただければ幸いです。私は昨日からこれを達成しようと努めてきました:(

Answer 1

Dropdown で onOpenChange 関数を使用してオープン ステータスを取得できます。Dropdown props を参照してください。これを使用して、独自のステータスを設定できます。最後に、この状態を使用してさまざまなアイコンを表示します。 リーリー