react onScroll 不起作用

IT技术 reactjs
2021-03-25 05:12:18

我正在尝试将 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 滚动。当我运行这个例子时,它不起作用。所以我尝试直接在渲染方法上绑定 this._handleScroll ,它也不起作用。

<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>

所以我打开了 chrome 检查器,直接添加了 onscroll 事件:

document.getElementById('#list').addEventListener('scroll', ...);

它正在工作!我不知道为什么会发生这种情况。这是 React 的错误还是什么?还是我错过了什么?任何设备都会非常感激。

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);
    }
    /* .... */
}
findDOMNode已弃用。而不是将您的 div ref 设置为“list”,您需要使用它进行设置<div ref={node => this.list = node},然后您的挂载/卸载函数可以直接访问该变量,而无需找到节点,this.list.addEventListener(...
2021-06-01 05:12:18