请教一个refs的问题!

#1

代码如下:

export default class Progress extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div className="component-progress" onClick={this.changeProgress} ref="progressBar">
                <div className="progress" style={{width:`${this.props.progress}%`}}></div>
            </div>
        );
    }
    changeProgress(e){
        //console.log(this.refs);
        //let progressBar = this.refs.progressBar;
        let progressBar = ReactDOM.findDOMNode(this.refs.progressBar);
        let progress = (e.clientX - progressBar.getBoundingClientRect.left) / progressBar.clientWidth;
        console.log(e.clientX);
        console.log(e.progress);
    }
}

报错信息为 cannot read property “refs”。有大神赐教吗?

#2

ES6语法创建React组件,class 中的方法不会自动绑定this上下文,需要手动绑定一下。用bind或者箭头函数都可以。

#3

可以这样解决