React onLoad img事件未按预期工作

Question

我正在编写一个简单的应用程序，该应用程序将图像列表作为背景（同一图像的不同大小）来获取，并希望实现以下内容：

小号已加载->设置背景，开始获取媒体->中号已加载->设置背景，开始获取大型

为此，我要设置一个预取元素，以加载图像，然后onLoad设置背景并开始预取下一个。

根据这一条款，应该是简单的：

<img src={image} alt="" onLoad={console.log('LOADED')}/>

在客户端完全加载图像后，我应该会看到一条LOADED消息。

那没有发生。

我想念什么吗？

提前致谢！

编辑：LOADED安装组件时出现该消息。

Answer 1

问题

您在那里缺少一个lambda表达式。该函数的直接调用将导致console.log()在组件安装后立即触发。这是一个常见的误解，与语法有关。

怎么了

功能

onLoad={console.log('LOADED')} 会在安装组件后立即调用，因为您实际上是在调用事件触发时调用的console.log不仅仅是设置function，在这种情况下应调用onLoad。

如何修复

您要做的是在其中引入一个lambda表达式，以便在onLoad实际触发时调用该函数。

<img src={image} alt="" onLoad={() => console.log('LOADED')}/>

您可能还需要传递事件的事件属性。您可以通过在lambda表达式中引入变量来做到这一点：

<img onLoad={(event) => this.myHandleImageLoadEvent(event)} />

其中，函数myHandleImageLoadEvent是在同一类中定义的函数，并且具有事件作为输入参数。