How to add scroll event in react component

Question

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.

Answer 1

You need to bind this to the element in context.

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

Answer 2

You can use onScroll attribute:

listenScrollEvent() {     console.log('Scroll event detected!'); }  render() {     return (         <table onScroll={this.listenScrollEvent}>            [...]         </table>     ) } 

Here is an example: https://jsfiddle.net/81Lujabv/