反应 onLoad img 事件未按预期工作答案

【问题标题】：React onLoad img event not working as expected反应 onLoad img 事件未按预期工作
【发布时间】：2018-10-16 02:27:48
【问题描述】：

我正在编写一个简单的应用程序，它获取图像列表作为背景（同一图像的不同大小），并希望实现如下功能：

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

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

根据this的文章应该很简单：

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

我应该看到LOADED 消息之后图像完全由客户端加载。

这不会发生。

我错过了什么吗？

提前致谢！

编辑：组件挂载时出现LOADED 消息。

【问题讨论】：

【解决方案1】：

问题

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

会发生什么

功能

onLoad={console.log('LOADED')} 组件安装后立即调用，因为您实际上调用的是console.log，而不仅仅是设置在触发事件时应该调用哪个function，在本例中为onLoad。

如何解决

您要做的是在其中引入一个箭头函数，以便在实际调用 onLoad 时调用该函数。

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

您可能还想从事件中传递事件属性。您可以通过为事件引入一个变量来做到这一点：

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

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

【讨论】：

您能详细说明一下吗？我不确定我是否理解你的提议。对不起:(
是的，看看我更新的答案。这可能是一个不同的问题。尝试使用 lambda。
工作就像一个魅力。就是这样。
完美。 onClick 和来自组件的所有其他事件也是如此。记住不要调用该函数。如果事件onLoad 也有一些您想要捕获的事件属性，您可以使用onLoad={(event) => console.log(event)} 将事件对象向下传递给控制台日志方法调用。你也可以用同样的方式调用其他方法； onLoad={(event) => this.handleOnLoad(event)}
术语“lambda 表达式”是类似语法的 .net 特定术语。在 JavaScript/ECMA 脚本中，它们被称为 arrow functions