如何在react组件中添加scroll事件 [英] How to add scroll event in react component

问题描述

我正在尝试在表格上添加 onScroll 事件。这就是我尝试过的：

I'm trying to add an onScroll event on a table. This is what I've tried:

componentDidMount() {
    ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent);
}

componentWillUnmount() {
    ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent);
}

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table ref="table">
           [...]
        </table>
    )
}

我试过 console.log（ReactDOM.findDOMNode（this.refs.table））我得到了正确的结果，但滚动事件从未被触发过。我查看了此处，但仍然失败了。任何帮助都会非常感激。

I tried console.log(ReactDOM.findDOMNode(this.refs.table)) and I'm getting the correct result but scroll event is never fired at all. I looked in here but still failed. Any help would be so much appreciated.

推荐答案

你需要将它绑定到上下文中的元素。

You need to bind this to the element in context.

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}

这篇关于如何在react组件中添加scroll事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！