我试图将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滚动。当我运行此示例时,它不起作用。所以我尝试直接在render方法上绑定this._handleScroll,它也不起作用。
<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>
因此,我打开了chrome inspector,直接使用以下命令添加了onscroll事件:
document.getElementById('#list').addEventListener('scroll', ...);
它正在工作!我不知道为什么会这样。这是React的错误还是什么?还是错过了什么?任何设备将不胜感激。
问题的根源this.refs.list是React组件,而不是DOM节点。要获取具有addEventListener()方法的DOM元素,您需要调用ReactDOM.findDOMNode():
this.refs.list
addEventListener()
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); } /* .... */ }