如何将"img"对象传递给 ReactJS JSX 中的加载事件处理程序？

Question

我正在创建一个img标签，我想要收听onLoad事件，但我也需要实际的图像对象，所以我可以检查宽度/高度等。这些都是动态创建的，所以我不能事先知道id。

//In the JSX:
<img src={this.generateSrc(config)} onLoad={this.handleOnLoad} />

在普通javascript中，我可以这样做:

<img onload="someFunction(this)" />

如何在ReactJS中传递?

Answer 1

您可以通过e.target获取实际图像对象

handleOnLoad(e) {
    console.log(e.target);
}

或通过引用组件

handleOnLoad() {
    console.log(this.refs.img);
}
<img ref='img' src={this.generateSrc(config)} onLoad={this.handleOnLoad.bind(this)} />

Answer 2

未来的javascript允许你做:

handleOnLoad = (e) => {
  console.log(e.target);
}
<img src={imgSrc} onLoad={this.handleOnLoad} />