javascript - 如何在 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)) 并且我得到了正确的结果，但是根本没有触发滚动事件。我看了here但还是失败了。非常感谢任何帮助。

Answer 1

您需要将 this 绑定(bind)到上下文中的元素。

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