マップ内の特定の反応要素に対してアクションを実行する

Question

私はReactアプリケーションの機能を使って、ユーザーが画像をクリックしてダッシュボードの背景として設定できるようにしています。前提はかなり基本的です。ユーザーがメニュー設定で壁紙設定をクリックすると、JSONファイルにajaxリクエストを実行して、サーバー上にある画像のURLを取得します。

if(this.state.wallpaper === true) { 
     let x = 0; 
     var defaultWallpapers = this.state.content.map(image => { 
     x++; 
     // Need to set image as a background so we can overlay 
     // things on top of the image. 
     var backgroundStyle = { 
      backgroundImage: 'url(' + image.url + ')', 
      backgroundSize: 'cover' 
     } 
     return (
      <div key={x} className="col-xs-4"> 
      <div className="imageBox" style={backgroundStyle}></div> 
      </div> 
     ); 
     }) 
    } 
    else { 
     var defaultWallpapers = null; 
    } 

私がしたいことを除いて、すべてがうまくいきます。ユーザーが選択した画像にオーバーレイを設定する必要があります。私はそのバージョンの画像を取得しましたが、私が想定したように、オーバーレイはすべての画像に適用されました。

ユーザーがクリックした画像のみを対象とする方法についての説明はありますか？

Answer 1

これでできることは、現在選択されている画像のURLをコンポーネントの状態に保存することです。ユーザーがイメージを選択するたびにこの操作を行うと、イメージがユーザーの現在選択されているイメージでもあるかどうかに基づいて条件付きで条件を追加できます。

var backgroundStyle = { 
    backgroundImage: 'url(' + image.url + ')', 
    backgroundSize: 'cover' 
}; 

if (this.state.currentImage === image.url) { 
    backgroundStyle['opacity'] = 0.5; 
} 

return (
    <div key={x} className="col-xs-4"> 
    <div 
     className="imageBox" 
     style={backgroundStyle} 
     onClick={() => this.setWallpaper(image)} 
    ></div> 
    </div> 
); 

（もちろん、あなたがオーバーレイを追加したいものは何でも行うことができます。ただ、簡単のため、私は、それがすでに選択されている指示する画像がわずかに透明にすることにしました。）