如何使用useRef在图像之间切换

Question

给定一个图像库，用户可以在其中单击一个图像，并且所选图像将显示在其下方的库中，我如何使用useRef在单击时用所选图像替换库div中的图像？其想法是，图像将从阵列填充到顶部的库中，因此每个图像可能都应用了useRef？

HTML

<div class="wrapper">
<div class="row">
<div class="column">
<img src="imageurl" alt="water" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl2" alt="tree" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl3" alt="snow" style="width:100%" onClick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl4" alt="mountain" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imageurl5" alt="tree2" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</div>

切换大图像可见性的功能

const myFunction = imgs => {
const imageRef = useRef();
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}

当前状态可以在这里看到：jsFiddle

Answer 1

React Docs状态：不要过度使用Refs

您的代码片段不是ref应该用于的用途。在React中，您应该通过状态更改而不是篡改DOM来实现交互，React就是为您设计的。

然而，从jsfiddle来看，你甚至没有使用React？我不确定您为什么要使用useRef？

---

UPDATE：代码修复

通过使用function来定义函数(而不是箭头函数(，它会被提升，以便HTML元素可以拾取它，getElementById方法会为您提供所需的元素引用。

只需将所有js替换为：

var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
function myFunction(imgs)  {
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}

你的jsfiddle工作。