reactjs – React onScroll不工作

发布时间：2020-12-15 20:53:29 所属栏目：百科来源：网络整理

导读：我正在尝试将onscroll事件处理程序添加到特定的dom元素.看看这段代码： class ScrollingApp extends React.Component { ... _handleScroll(ev) { console.log("Scrolling!"); } componentDidMount() { this.refs.list.addEventListener('scroll',this._handl

我正在尝试将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);
    }
    /* .... */
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!