Блог

Главная - Вопросы по программированию - addEventListener при отображении DOM в ReactJS

addEventListener при отображении DOM в ReactJS

#reactjs

Вопрос:

Я использую некоторую открытую библиотеку, и она отображает некоторый HTML-DOM. Я хочу добавить какое-то событие и иметь небольшой код ниже.

   useEffect(()=>{
    const element = document.getElementsByClassName("MyClassName");
    console.log(element.length) // Got 0
    
    element[0].addEventListener("mouseover", function () {
    //Code ....
   });
  },[])
  
  return(
  <div>
   <renderHTMLDOM /> {* Render <div className="MyClassName" />*}
  </div>
  )

Это означает, что у меня было имя функции renderHTMLDOM для рендеринга HTML.

И я хочу addEventListener в то, что <div className="MyClassName"/> я только что создал.

Весь DOM был отрисован в браузере, но я получил 0 , когда console.log(element.length) и addEventListener is not a function error .

Я попробовал условие if(element.length) { ... } , но оно не сработало.

Как я могу это исправить?

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

1. Запрос DOM и прикрепление/изменение дочерних элементов, подобных этому, очень противоречит шаблону в React. Используйте ссылку React, если в противном случае необходимо напрямую прикрепить обработчики событий к конкретному событию в компоненте React. Т. Е. <div className="MyClassName" onMouseOver={handler} />

2. Почему вы это делаете? какой-нибудь конкретный случай использования ?

3. @MayankPandeyz да, я использую некоторую библиотеку для создания своего веб-сайта, но библиотека не поддерживает некоторые события.

4. @DrewReese Я не могу добавить onMouseOver , потому что я использую некоторую библиотеку для его визуализации.

5. Является renderHTMLDOM ли функция или это компонент реакции? Можете ли вы поделиться этим кодом? Я думаю, что правильный ответ здесь состоит в том, чтобы использовать ссылку, по крайней мере, для доступа к DOMNode первого элемента, который отображается в вашем коде.

Метки: