如何在React组件中添加滚动事件

Question

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

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))，但得到的结果正确，但是滚动事件从未触发过。我看着这里，但还是失败了。任何帮助将不胜感激。

Answer 1

您需要将此绑定到上下文中的元素。

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