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状态：请勿滥用引用

您的代码段不是ref的用途。在React中，您应该通过状态更改来使事物具有交互性，而不是通过摆弄DOM来实现，React旨在为您做到这一点。

但是从该jsfiddle看来，您甚至没有使用React？我不确定您为什么要使用useRef？

更新：代码修复

通过使用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工作正常。

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

1 个答案: