React での複数のボタンの実装: クリックされたボタンを除くすべてのボタンの選択を解除する

Question

3 つのボタンを実装しようとしています。そのうちの 1 つをクリックすると背景色が変更され、他の 2 つのボタンは選択が解除され、背景色は元の色に戻ります。

ただし、React で実装しようとすると、常にボタン 1 つ後ろになります (ボタン 1、3、2 を順番にクリックすると、選択したボタンが 1、3 に移動するという意味です)。タイプミス、すぐ後ろ））。

これは、この特定のコンポーネントのコードです。

リーリー

'./Images' からインポートしたコンポーネントは、<img src={<Image_here>} /> を持つものだけでした。

Answer 1

activeBtnElement の状態を維持し、特定のボタンをクリックしたときに、この activeBtnElement の状態をその状態で更新します。次に、その状態に基づいて条件を適用します。 buttonGroup を使用することもできます。