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>
);

（显然你可以做任何想要添加叠加的东西。为了简单起见，我选择让图像略微透明，以表明它已被选中。）

对map函数中的特定react元素执行操作

1 个答案: