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屋！