javascript - 如何使用 react 或 css 在图库中一次突出显示 1 张图像

Question

我正在创建一个图像选择模式，并希望用户只选择 1 张图像。我知道如何获取那张独特的图像并推送该数据，但我不知道如何一次突出显示一张单独的图像。

例如，如果用户点击一张图片，该图片周围应该有蓝色边框，但如果他们点击另一张图片，则第二张图片将有蓝色边框，而另一张图片将失去该边框。

可能有数百张图片，所以我无法手写出来。我该怎么做？

这是我的一些代码，非常基本的东西。

imageChosen = (e) => {
  console.log(e)
};

<div className={classes.imageList}>
  <div className={classes.imageWrap}>
     <img onClick={(e) => this.imageChosen(e.target.src)} src="smallfamilyadv.jpg" alt="" />
  </div>
  <div className={classes.imageWrap}>
     <img onClick={(e) => this.imageChosen(e.target.src)} src="BugzPlaypark.jpg" alt="" />
  </div>
  <div className={classes.imageWrap}>
     <img onClick={(e) => this.imageChosen(e.target.src)} src="play-park-500x500.jpg" alt="" />
  </div>
</div>

Answer 1

使用状态和数组列表

state = {
 imageChosen : undefined;
}

render() {
 const img = ["smallfamilyadv.jpg","BugzPlaypark.jpg", "play-park-500x500.jpg"]

 return <div className={classes.imageList}>
  {img.map((e,i)=> {
   return <div key={i} className={this.state.imageChosen === e ? classes.imageWrapSelected : classes.imageWrapNormal}>
      <img onClick={(e) => this.setState({imageChosen:e.target.src})} src={e} alt={e} />
   </div>
  })} 
 </div>
}