web-dev-qa-db-fra.com

Comment ajouter un événement de défilement au composant de réaction

J'essaie d'ajouter un événement onScroll sur une table. C'est ce que j'ai essayé:

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

J'ai essayé console.log(ReactDOM.findDOMNode(this.refs.table)) et j'obtiens le résultat correct, mais l'événement scroll n'est jamais déclenché. J'ai regardé dans ici mais j'ai toujours échoué. Toute aide serait tellement appréciée.

javascriptreactjsecmascript-6
15
Lord Salforis

Vous devez lier ceci à l'élément en contexte.

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

Je cherchais à faire quelque chose de similaire. L'ajout de l'écouteur d'événements à la fenêtre au lieu du ReactDom.findDOMNode a fonctionné pour moi ...

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

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

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

Vous pouvez utiliser l'attribut onScroll:

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

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

Voici un exemple: https://jsfiddle.net/81Lujabv/

4
Anton Kulakov

selon les documents React ( https://reactjs.org/docs/handling-events.html ),

Les événements React sont nommés en utilisant camelCase, plutôt qu'en minuscules . Vous pouvez définir des attributs comme vous le faites avec du HTML pur.

HTML:

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

JSX:

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

vous devez créer un élément de bloc wrapper de hauteur fixe pour permettre le défilement.

0
kidkkr

J'avais trouvé une bonne solution à ce problème. Le code suivant fonctionne, où le programme d'écoute concerne uniquement la classe/div particulière: React version est 16.0.0

Première importation ReactDOM, import ReactDOM from "react-dom";

Then dans la section 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
    });
  }

Après avoir collé les fonctions ci-dessus, dans la méthode render(), quel que soit le nom de la méthode ref, vous pouvez le faire, assurez-vous que le même nom est utilisé dans findDOMNode aussi, c'est-à-dire findDOMNode(this.refs.category_scroll): 

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

.

.

S'il s'agit d'un défilement horizontal, alors event.currentTarget.scrollTop fonctionne dans la fonction listenScrollEvent ().

0
Shivansh Jagga