ReactJS JSX의 onload 이벤트 핸들러에 "img"객체를 전달하려면 어떻게해야합니까?

Question

나는 onLoad 이벤트를 듣고 싶은 img 태그를 만들었지 만 실제 이미지 개체가 필요하므로 너비/높이 등을 확인할 수 있습니다. 이것들은 동적으로 만들어지기 때문에 미리 id를 알 수는 없습니다. 일반 자바 스크립트에서

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

, 내가 할 수있는 :

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

어떻게 ReactJS에 되었합니까?

Answer 1

e.target을 통해 실제 이미지 개체를 얻을 수 있습니다.

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

또는 당신이 할 수 있도록 자바 스크립트 Refs to Component

handleOnLoad() { 
    console.log(this.refs.img); 
} 

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

Answer 2

미래로 :

는

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

<img src={imgSrc} onLoad={this.handleOnLoad} /> 

사파리와 파이어 폭스가 콜백