TypeError: выпадающее значение равно нулю при попытке получить доступ к элементу Dom вactjs - PullRequest
0 голосов
/ 06 июля 2018

пожалуйста, у меня ошибка в реакции, хорошо, импортирован какой-то внешний js-файл, для выполнения каких-то манипуляций с Dom, таких как добавление класса css и удаление класса css из моего шаблона. Проблема в том, что когда мой класс App.js загружается, он выдает ошибку, что раскрывающийся класс не найден, из моего собственного понимания я думаю, потому что компонент еще не рендерится. Короче, пожалуйста, кто-нибудь может мне помочь, пожалуйста. Заранее спасибо.

код JS

var dropdown = document.querySelector('.modal');
dropdown.addEventListener('click', function(event) {
  event.stopPropagation();
  dropdown.classList.toggle('is-active');
});        

ошибка, которую я получаю

    TypeError: dropdown is null
./src/modules/Restaurants/utils/main.js
C:/Users/user/Desktop/fungry/fungry/src/modules/Restaurants/utils/main.js:2

  1 | var dropdown = document.querySelector('.dropdown');
> 2 | dropdown.addEventListener('click', function(event) {
  3 |   event.stopPropagation();
  4 |   dropdown.classList.toggle('is-active');
  5 | });

будет ждать большое спасибо

1 Ответ

0 голосов
/ 06 июля 2018

Вы должны писать этот код внутри componentDidMount функции вашего класса реагирования, внутри которой находится элемент .modal.

componentDidMount(){
    var dropdown = document.querySelector('.modal');
    dropdown.addEventListener('click', function(event) {
        event.stopPropagation();
        dropdown.classList.toggle('is-active');
    });   
}

Кстати, вы должны использовать onClick атрибут реагирования вместо привязки, например, щелкнуть функцию

...