我正在尝试将onscroll事件处理程序添加到特定的dom元素.看看这段代码：
class ScrollingApp extends React.Component {
...
_handleScroll(ev) {
console.log("Scrolling!");
}
componentDidMount() {
this.refs.list.addEventListener('scroll',this._handleScroll);
}
componentWillUnmount() {
this.refs.list.removeEventListener('scroll',this._handleScroll);
}
render() {
return (
<div ref="list">
{
this.props.items.map( (item) => {
return (<Item item={item} />);
})
}
</div>
);
}
}
代码非常简单,正如您所看到的,我想处理div#list scrolling.当我运行这个例子时,它不起作用.所以我尝试直接绑定this._handleScroll渲染方法,它也不起作用.
<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>
所以我打开了chrome检查器,直接添加onscroll事件：
document.getElementById('#list').addEventListener('scroll',...);
它正在工作！我不知道为什么会这样.这是React的错误还是什么？还是我错过了什么？任何设备都将非常感激.
问题的根源是this.refs.list是一个React组件,而不是一个DOM节点.要获取具有addEventListener()方法的DOM元素,需要调用ReactDOM.findDOMNode()：
class ScrollingApp extends React.Component {
_handleScroll(ev) {
console.log("Scrolling!");
}
componentDidMount() {
const list = ReactDOM.findDOMNode(this.refs.list)
list.addEventListener('scroll',this._handleScroll);
}
componentWillUnmount() {
const list = ReactDOM.findDOMNode(this.refs.list)
list.removeEventListener('scroll',this._handleScroll);
}
/* .... */
}
