Блог

Главная - Вопросы по программированию - Использование eventlistener в reactjs (JSX)

Использование eventlistener в reactjs (JSX)

#reactjs #react-jsx

#reactjs

Вопрос:

Я пытаюсь изучить Reactjs, но у меня не получается. Я хочу добавить класс sticky header в свою таблицу, которая отображается с помощью Reactjs, но я не добился никакого успеха с этим кодом / псевдокодом. 

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

Я пытаюсь использовать эту функцию 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>

Но я не добиваюсь никакого успеха. Есть ли более простой способ реализовать функцию javascript в Reactjs?

Ответ №1:

В строке

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

Я предполагаю, что вы имели в виду вместо:

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

Комментарии:

1. Да, и я также вижу эту ошибку в консоли: не удается прочитать свойство ‘querySelector’ неопределенного.

2. Что такое this.root ? Он не определен, когда вы пытаетесь получить к нему доступ handleScroll .

3. Я вижу эту ошибку при прокрутке вниз, поэтому я думаю, что функция запускается во время прокрутки, но мне, возможно, придется выяснить этот объект. Должна быть какая-то синтаксическая ошибка. Спасибо за ответ.

4. Извините, что беспокою вас всех, но все, что мне нужно было сделать, это запустить функцию vanilla JS /****************************/ handleScroll: функция (e){ заголовок переменной = документ. querySelector(‘.header’); var origOffsetY = header.offsetTop; window.scrollY >= origOffsetY ? header.classList.add(‘sticky’): header.classList.remove(‘sticky’); }, componentDidMount : функция(){ window.addEventListener(‘scroll’,this.handleScroll); }, /**********************/