useState フックは、予想されるコンポーネントだけでなく、すべてのコンポーネントの状態を変更します。

Question

Reactを使用しています。クリックされた画像のスタイルを変更しようとしています。ただし、この関数を使用すると、状態はすべての要素に適用されます。 onClickイベントが画像に適用されます。 1 つをクリックすると、他の画像の境界線の色が #a2a0ff に変わります。クリックされた画像のみが #4D4AFF の色を持つ必要があります。

リーリー

Answer 1

すべての画像にスタイルを適用する ImgStyle という変数が 1 つだけあり、その値がすべての onclick イベントに設定されるため、常に同じスタイルが設定されます。

この方法でこれを行うには、画像ごとに 1 つずつ、合計 5 つの個別の状態変数が必要です。しかし、実際には、多くても 1 つの画像 (クリックしたばかりの画像) に境界線を表示したいだけであると仮定します。その場合、別個の状態変数はまったく必要ありません。現在の imageHref と画像の実際の href に基づいてスタイルを計算するだけです:

リーリー

次に、それを各画像に適用します (以下に示すのは例のみですが、他の画像に適用する方法は明らかです):

リーリー

href 文字列配列を作成し、map 関数を繰り返し実行して各 img タグを生成することで、このプロセスをさらに簡素化することもできます。