javascript - react的return中的事件,如何取到标签自身?
本文介绍了javascript - react的return中的事件,如何取到标签自身?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
先上代码
class AlbumArt extends React.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() {
var id = this.props.playerId + "AlbumArt",
imgId= this.props.playerId + "AlbumArtImg"
return (
<div
id={id}
style={this.getStyles()}>
<TrackInfoOverlay
{...this.props}>
</TrackInfoOverlay>
<img
id={imgId}
ref="art"
style={{width: "100%", transform: "translateZ(0)"}}
src="http://wwww.baoadkaskdoa.asdasd"
onError={this.errorImg(this)} />
</div>
)
}
}
其中当img加载失败时,我想让他替换成本地的图片,就写了errorImg事件,但是不知道怎么取到img这个标签本身,我现在这么写,取到的this是整个class。
问: onError={this.errorImg(this)}
如何书写才能取到img标签本身?
解决方案
根据 @learning @Timdu @猫切 的描述,我就自己改写了一下,
整体死路就是不要直接操作html的标签,而是改用state或者props的形式来处理。
贴下自己的代码
class AlbumArt extends React.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');
// 首页默认图片设置
this.setState({imgUrl: "../../build/assets/img/main_tray.png"});
}
render() {
var id = this.props.playerId + "AlbumArt",
imgId= this.props.playerId + "AlbumArtImg"
return (
<div
id={id}
style={this.getStyles()}>
<TrackInfoOverlay
{...this.props}>
</TrackInfoOverlay>
<img
id={imgId}
ref="art"
style={{width: "100%", transform: "translateZ(0)"}}
src={this.state.imgUrl}
onError={this.errorImg.bind(this)} />
</div>
)
}
}
解决! 再次谢谢三位。
这篇关于javascript - react的return中的事件,如何取到标签自身?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文