首頁猿問 react的return中的事件，...

react的return中的事件，如何取到標(biāo)簽自身？

JavaScript

ibeautiful 2019-05-25 13:31:03

先上代碼classAlbumArtextendsReact.Component{getStyles(){return{width:"100%",height:"auto",display:"block",position:"relative",margin:0,overflow:"hidden"}}errorImg(img){console.log(img);img.src="../../../../../build/assets/img/main_tray.png";img.onerror=null;}render(){varid=this.props.playerId+"AlbumArt",imgId=this.props.playerId+"AlbumArtImg"return()}}其中當(dāng)img加載失敗時，我想讓他替換成本地的圖片，就寫了errorImg事件，但是不知道怎么取到img這個標(biāo)簽本身，我現(xiàn)在這么寫，取到的this是整個class。問：onError={this.errorImg(this)}如何書寫才能取到img標(biāo)簽本身？

查看完整描述

2 回答

夢里花落0921

TA貢獻1772條經(jīng)驗獲得超6個贊

根據(jù)@learning@Timdu@貓切的描述，我就自己改寫了一下，整體死路就是不要直接操作html的標(biāo)簽，而是改用state或者props的形式來處理。貼下自己的代碼classAlbumArtextendsReact.Component{constructor(props){super(props);this.state={imgUrl:this.props.albumArt}}getStyles(){return{width:"100%",height:"auto",display:"block",position:"relative",margin:0,overflow:"hidden"}}errorImg(){console.log('function-errorImg');//首頁默認(rèn)圖片設(shè)置this.setState({imgUrl:"../../build/assets/img/main_tray.png"});}render(){varid=this.props.playerId+"AlbumArt",imgId=this.props.playerId+"AlbumArtImg"return(id={id}style={this.getStyles()}>{...this.props}>id={imgId}ref="art"style={{width:"100%",transform:"translateZ(0)"}}src={this.state.imgUrl}onError={this.errorImg.bind(this)}/>