Utiliser eventlistener dans reactjs (JSX)

Question

J'essaie d'apprendre Reactjs mais je ne suis pas capable de le résoudre. Je veux ajouter une classe d'en-tête collante à ma table qui est rendue en utilisant Reactjs mais je n'obtiens aucun succès avec ce code/pseudocode.

handleScroll: function(e){ 
    var header = this.root.querySelector('.header'); 
var origOffsetY = header.offsetTop; 
    window.scrollY >= origOffsetY ? header.addClass('sticky'): header.removeClass('sticky'); 
}, 

componentDidMount : function(){ 
window.addEventListener('handleScroll',this.handleScroll); 
}, 

Je suis en train d'utiliser cette fonction Javascript:

<script> 
var header = document.querySelector('.header'); 
var origOffsetY = header.offsetTop; 

function onScroll(e) { 
    window.scrollY >= origOffsetY ? header.classList.add('sticky') : 
            header.classList.remove('sticky'); 
} 

document.addEventListener('scroll', onScroll); 
</script> 

Mais je ne reçois aucun succès. Existe-t-il un moyen plus facile d'implémenter la fonction javascript dans Reactjs?

Answer 1

Dans la ligne

window.addEventListener('handleScroll', this.handleScroll); 

Je devine que vous vouliez dire à la place:

window.addEventListener('scroll', this.handleScroll);