Выполнение действий над конкретным элементом реагирования в функции карты

Question

Я работаю над функцией в приложении React, которая позволяет пользователям щелкнуть изображение, чтобы установить его в качестве фона своей панели. Посылка довольно простая, когда пользователь нажимает настройки обоев в своих настройках меню, я выполняю запрос ajax в файл JSON, чтобы захватить 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> 
); 

(Очевидно, что вы можете делать все, что вы хотите, чтобы добавить наложение. Просто ради простоты я выбрал, чтобы сделать изображение слегка прозрачной, чтобы указать, что уже выбран.)