如何在react组件中添加scroll事件

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>
    )
}

Answer 2

您可以使用onScroll属性：

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

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

这是一个例子：https : //jsfiddle.net/81Lujabv/

Answer 3

我想做类似的事情。将事件侦听器添加到窗口而不是 ReactDom.findDOMNode 对我有用......

componentDidMount() {
    window.addEventListener('scroll', this.handleScrollToElement);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollToElement);
}

handleScrollToElement(event) {
    console.log('Fired ' + event)
}