react的return中的事件，如何取到标签自身？

Question

先上代码

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标签本身？

Answer 1

根据 @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>
        )
    }
}

解决！ 再次谢谢三位。

Answer 2

先说一下答案，要用到ref

https://facebook.github.io/re...

<img
  id={imgId}
  ref={imgElement => this.imgElement = imgElement}
  style={{width: "100%", transform: "translateZ(0)"}}
  src="http://wwww.baoadkaskdoa.asdasd"
  onError={this.errorImg(this.imgElement)} />

能不操作DOM，尽量不要操作DOM，建议换种思维方式

Answer 3

不如换个思路，把img的src 存放在pro里面，render时绑定pro src={this.pro.imgsrc}。 如果触发onerror 事件，改变img的src 即可。

Answer 4

感觉不是这思路
img的src由一个state的去维护，当onError触发时，调用this.errorImg，this.errorImg去改变由state维护的src替换成本地图片的url