Как добавить событие прокрутки в компонент реакции

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

Вы можете использовать onScroll атрибут:

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

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

Вот пример: https://jsfiddle.net/81Lujabv/

Answer 2

Вы должны связать это с элементом в контексте.

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

Answer 3

Дайте этому попытку, добавил .bind(this) к this.listenScrollEvent, когда вы передаете его addEventListener.

componentDidMount() { 
     ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent.bind(this)); 
    } 

    componentWillUnmount() { 
     ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent.bind(this)); 
    } 

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

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