小编典典

反应onScroll不起作用

reactjs

我试图将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的错误还是什么?还是错过了什么?任何设备将不胜感激。


阅读 675

收藏
2020-07-22

共1个答案

小编典典

问题的根源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);
    }
    /* .... */
}
2020-07-22