Reagieren onScroll nicht feuern

Habe ich einfach reagieren Komponente, ich onScroll-Ereignis, dass Komponente, aber wenn ich scrollen, es ist nicht feuern 

import React, { Component, PropTypes } from 'react'

export default class MyComponent extends Component {
  _handleScroll(e) {
    console.log('scrolling')
  }

  render() {
    const style = {
      width: '100px',
      height: '100px',
      overflowY: 'hidden'
    }
    const innerDiv = {
      height: '300px',
      width: '100px',
      background: '#efefef'
    }
    return (
      <div style={style} onScroll={this._handleScroll}>
        <div style={innerDiv}/>
      </div>
    )
  }
}
InformationsquelleAutor Wimal Weerawansa | 2017-02-17
  1. 3

    Müssen Sie ändern Sie den Wert von overflowY zu auto oder scroll. Jetzt bist du nicht immer ein Scrollbalken, weil hidden bewirkt, dass der browser das ausblenden der scrollbar.

    InformationsquelleAutor nathan
  2. 0

    müssen Sie einen ref auf das DOM-element:

    Reagieren onScroll nicht funktioniert

    class ScrollingApp extends React.Component {

    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.removeEventListener('scroll', this._handleScroll);
    }
    /* .... */
}
    InformationsquelleAutor Conan
  3. -1

    Sie zu binden, müssen die _handleScroll Ereignis in einem Konstruktor. Versuchen Sie, diese an die Komponente.

    constructor() {
  this._handleScroll = this._handleScroll.bind(this);
}

    https://facebook.github.io/react/docs/handling-events.html

    • Das ist nicht wahr. Sie brauchen nur binden Sie die handler-Funktion, wenn Sie möchten, den Zugang zu den Klassen this Objekt. OP ist einfach aufrufen console.log, so ist es in diesem Fall irrelevant.
    InformationsquelleAutor grizzthedj
Schreibe einen Kommentar