点击小图后如何更改大图的来源？答案

【问题标题】：How to change the source of big image after clicking on the small image?点击小图后如何更改大图的来源？
【发布时间】：2022-11-21 15:30:15
【问题描述】：

我有一组小图像堆叠在侧面，较大版本的图像在右侧。我希望在单击小图像时更改大图像，但问题是我可以使用 vanilla JavaScript 实现此目的，但我无法在 reactjs 中执行此操作。下面是它的外观截图 enter image description here 下面是代码

<div class="header-body">

        <div class="wrapper">

          <div class="product-box">

            <div class="all-images">

            <div class="small-images">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/TqMj09C/image-1.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">

        </div>

            <div class="main-images">

              <img src="https://i.ibb.co/5LdMxNp/image.jpg" id="imagebox">

            </div>

            </div>

      </div>

下面是我写的普通 JavaScript 函数

function clickimg(smallImg){

  var fullImg = document.getElementById("imagebox");

  fullImg.src= smallImg.src;

}

这在 codepen 上正常运行。但是这个功能在reactjs中不起作用。

【问题讨论】：

任何错误信息？

标签： javascript reactjs jsx

【解决方案1】：

您应该将存储空间用于活动图像或如您所说的“主要”；

如果你使用带钩子的 React useState 将很适合你存储活动图像；

并且您应该添加处理点击小图像的功能；

<div class="small-images">
   <img src='1' onClick={handleClick}/>
   <img src='2' onClick={handleClick}/>
   <img src='3' onClick={handleClick}/>
</div

<div class="big-image">
   <img src={activeImage || '*src to default image*'}/>
</div>

const [activeImage, setActiveImage] = useState(*first or whatever logic*)

function handleClick(event){
   console.dir(event.target) // you should better inspect your HTML element
   const src = event.target.src;
   setActiveImage(src);
}

【讨论】：