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