Next.js 仅在 Image 组件上设置点击事件答案

【问题标题】：Next.js setting click event only on Image componentNext.js 仅在 Image 组件上设置点击事件
【发布时间】：2021-11-17 10:41:28
【问题描述】：

我希望能够只对图像进行点击事件，但是因为我必须设置宽度和高度，所以它在整个父 div 上设置了点击事件。

例如，如果图像是 600 宽 x 300 高，在父级之间有空间，点击事件仍然发生在图像之外但在父级内。

<div
  style={{ width: 600, height: 600 }}
  className="image-item bg-gray-200 w-9/12 h-auto relative"
>
  <div
    onClick={(e) => handleTags(e)}
    className=""
    ref={imageWrapRef}
  >
    <Image
      className=""
      src={image["data_url"]}
      alt=""
      layout="fill"
      objectFit="contain"
    />
  </div>
</div>

图片上方和下方的空间仍然可以点击，但我只想点击图片。

生成代码的检查器元素的屏幕截图：

这也是一个有效的代码框：https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js

【问题讨论】：

图片上方的 div 是什么？只是想知道，因为如果您不使用它，您只需在 Image 上传递 useRef，不是吗？或者，如果仍然有必要，那么使用 e.stopPropagation() 我们可以停止冒泡
@WahabShah 我添加了 DOM 生成的屏幕截图。 Next.js 中的组件创建了一个父
包装标记，然后我在组件上方创建另一个
是您在屏幕截图中看到的空类，希望我可以在图像本身周围做一个 onClick，但由于某种原因，它会影响具有 bg-gray-200 类的父级
我的意思是除了你的bg-gray-200 div 和 nextJs 创建的那个 div。您提供ref={imageWrapRef} 的div。直接给你的<Image />.?之后我们将不得不做e.stopPropogation()。先试试上面的，然后欢迎评论我们可以讨论
@WahabShah 我添加了一个代码框仅供参考。但是您是说要在组件中添加 ref 吗？
我会检查沙箱。是的，我是这么说的。

【解决方案1】：

因此，对于遇到此问题的任何人。我必须设置的一件事是在显示之前图像的图像宽度和高度。

帮助我的答案之一是使用onLoadingComplete，您可以在此处查看更多详细信息：Next.js Image component props onLoadingComplete not working?

这让我可以提供宽度/高度：

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={data2blob(image)}
  alt=""
  width={imageWidth}
  height={imageHeight}
  layout="responsive"
  objectFit="contain"
/>

handleImageLoad 函数如下：

const handleImageLoad = (e) => {
  setImageWidth(e.naturalWidth);
  setImageHeight(e.naturalHeight);
};

编辑：

我确实遇到了上面的一个问题，那就是鸡和蛋的问题（图片上传，然后是尺寸）。所以我要做的就是最初设置宽度和高度：

const [imageWidth, setImageWidth] = useState(0);
const [imageHeight, setImageHeight] = useState(0);

【讨论】：