कैसे स्क्रॉल घटना जोड़ने के लिए घटक

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 में देखा लेकिन अभी भी असफल रहा। किसी भी मदद की बहुत सराहना की जाएगी।

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

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

यहाँ एक उदाहरण है:

Answer 1

आप onScroll विशेषता का उपयोग कर सकते हैं https://jsfiddle.net/81Lujabv/

Answer 2

आप संदर्भ में तत्व को यह बाध्य करने के लिए की जरूरत है।

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

Answer 3

इस आज़मा कर देखें, this.listenScrollEvent को .bind(this) जोड़ा जब आप इसे 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> 
     ) 
    }