React组件中img元素onLoad事件未按预期触发的问题求助

咱们先拆解你遇到的两个核心问题：onLoad 回调不触发，以及修改写法后出现的 testLog未被使用 错误。

1. 为什么最初的onLoad没有触发？ #

你当前的 img 标签缺少**src 属性**！浏览器只有在加载指定的图片资源时才会触发 onLoad 事件——哪怕 img 元素能在页面上渲染，但没有 src 就不会发起资源请求，自然不会触发加载完成的回调。

你可以给 img 加上一个有效的图片地址验证：

const testLog = () => { console.log('aaa - test') ; }
const MyComponent = () => ( <img src="https://example.com/your-image.jpg" onLoad={() => testLog()} /> );

这样当图片加载完成后，testLog 里的日志就会正常打印了。

2. 为什么修改后的写法会报错？ #

你尝试的这段代码存在两个关键问题：

const MyComponent = () => ( <img onLoad={() => this.testLog.bind(this)} /> );

• 函数组件里没有this上下文：React函数组件不像类组件有实例对象，this在这里是undefined，完全不需要用this来调用testLog。
• 你只是返回了bind的结果，却没有执行函数：bind会返回一个新的函数，但你没有调用它，相当于testLog根本没被执行，这也是ESLint提示“testLog未被使用”的原因。

而且这里完全没必要用bind，testLog是独立函数，没有依赖任何上下文。

正确写法参考 #

如果不需要传递参数，直接把testLog绑定给onLoad即可：

const testLog = () => { console.log('aaa - test') ; }
const MyComponent = () => ( <img src="your-image-url" onLoad={testLog} /> );

如果需要传递参数，再用箭头函数包裹：

const testLog = (msg) => { console.log(msg) ; }
const MyComponent = () => ( <img src="your-image-url" onLoad={() => testLog('aaa - test')} /> );

内容的提问来源于stack exchange，提问作者sid