如何使用 react 或 css 在圖像庫中一次突出顯示 1 個圖像

Question

我正在創建一個圖像選擇模式，並希望用戶只選擇 1 個圖像。 我知道如何獲取那張獨特的圖像並推送該數據，但我不知道如何一次突出顯示一個單獨的圖像。

例如，如果用戶點擊 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 和數組列表

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>
}