react代码中怎么处理HTML5标签marquee的鼠标移上去的滚动事件

Question

<marquee onmouseout="this.start();" onmouseover="this.stop();">
上面代码在html5的新标签，效果是字体内容在显示屏上从左向右滚动。
onmouseout="this.start();" onmouseover="this.stop();在普通代码中是鼠标经过字体停止滚动，离开滚动继续。

SO,问题来了，我把这段代码放在react项目里面
import React, {Component} from 'react';
import './aa'
class App extends Component {

Astop(){

    this.stop();
}

Astart(){
    this.start();
}
render() {
    return (
        <div>
            <marquee scrollamount='10' onMouseOver={this.Astop.bind(this)} onMouseOut={this.Astart.bind(this)}>滚动文字</marquee>
        </div>

    );
}

}

export default App;

鼠标经过文字时，系统报错了

请问哪位大佬 怎么改哇？感谢~

Answer 1

Astop(){
    this.refs.mar.stop();
}

Astart(){
    this.refs.mar.start();
}
render() {
    return (
        <div>
            <marquee scrollamount='10' ref="mar" onMouseOver={this.Astop.bind(this)} onMouseOut={this.Astart.bind(this)}>滚动文字</marquee>
        </div>

    );
}