webentwicklung-frage-antwort-db.com.de

So fügen Sie ein Scroll-Ereignis in der React-Komponente hinzu

Ich versuche, ein onScroll -Ereignis in eine Tabelle einzufügen. Das habe ich versucht:

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

Ich habe console.log(ReactDOM.findDOMNode(this.refs.table)) ausprobiert und erhalte das korrekte Ergebnis, aber das Scroll-Ereignis wird niemals ausgelöst. Ich schaute in hier aber scheiterte immer noch. Jede Hilfe wäre so dankbar.

15
Lord Salforis

Sie müssen dies im Kontext an das Element binden.

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

Ich wollte etwas ähnliches tun. Das Hinzufügen des Ereignis-Listeners zum Fenster anstelle des ReactDom.findDOMNode funktionierte für mich ...

componentDidMount() {
    window.addEventListener('scroll', this.handleScrollToElement);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollToElement);
}

handleScrollToElement(event) {
    console.log('Fired ' + event)
}
4
tlagreca

Sie können das onScroll-Attribut verwenden:

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

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

Hier ist ein Beispiel: https://jsfiddle.net/81Lujabv/

4
Anton Kulakov

gemäß den React-Dokumenten ( https://reactjs.org/docs/handling-events.html ),

React-Ereignisse werden mit camelCase und nicht mit Kleinbuchstaben benannt. Sie können Attribute wie bei reinem HTML festlegen.

HTML:

<div onclick="..." onscroll="...">
  ...
</div>

JSX:

<div onClick={...} onScroll={...}>
  ...
</div>

sie sollten ein Wrapper-Blockelement mit fester Höhe erstellen, um das Scrollen zu ermöglichen.

0
kidkkr

Ich hatte eine gute Lösung für dieses Problem gefunden. Der folgende Code funktioniert, wobei der Listener ist nur auf der bestimmten Klasse/Div: React Version ist 16.0.0

Erster Import ReactDOM, import ReactDOM from "react-dom";

Dann im Abschnitt class xyz extends Component

  constructor(props) {
    super();
    this.state = {
        vPos : 0
    }
    this.listenScrollEvent = this.listenScrollEvent.bind(this);
  }

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

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

  listenScrollEvent(event) {
    console.log('firee');
    this.setState({
        vPos: event.target.body.scrollTop
    });
  }

Nach dem Einfügen die obigen Funktionen, in der render() -Methode, was auch immer Sie die ref -Methode nennen möchten, Sie können dies tun, stellen Sie sicher der gleiche Name steht auch in findDOMNode, dh findDOMNode(this.refs.category_scroll):

<div onScroll={this.listenScrollEvent} ref="category_scroll">
...
</div>

.

.

Wenn es sich um ein horizontales Scrollen handelt, funktioniert event.currentTarget.scrollTop In der Funktion listenScrollEvent ().

0
Shivansh Jagga