反応コンポーネントにスクロールイベントを追加する方法

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を見ましたが、それでも失敗しました。どんな援助も非常に高く評価されます。あなたは、コンテキスト内の要素にこれをバインドする必要がありhttps://jsfiddle.net/81Lujabv/

Answer 1

あなたはonScroll属性を使用することができます。あなたはaddEventListenerにそれを渡すとき

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

Answer 2

：ここ

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

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

は一例です。

Answer 3

これ試してみては、this.listenScrollEventに.bind(this)を追加しました。

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