Получение компонента React для работы со слушателем jQuery

Хотя это не лучший подход к проблеме, мне нужно, чтобы мое приложение React взаимодействовало с jQuery, пока я не найду лучшее решение.

На странице HTML для моего компонента точки входа у меня есть простой слушатель jQuery - см. Ниже:

<html>
... // Omitted for brevity
<body>
... // Omitted for brevity
<script type = "text/javascript">

   $(".my-class").on("click", function() {
      debugger;
      // We'll do something here
   })

</script>
</body>
</html>

Затем в моем немом компоненте у меня есть следующее, но оно не работает. Когда я нажимаю кнопку, я не попадаю в точку останова, установленную в слушателе.

const MyComponent = () => {
   return(
      <div>
         <a href = "#" className = "btn-primary my-class">Click Me!</a>
      </div>
   );
}

export default MyComponent;

Есть идеи, как я могу заставить это работать?

Почему вы хотите использовать jQuery, вместо этого вы можете использовать привязку событий onClick к вашему компоненту или самому a. Тогда почему привязка кликов jQuery?

— 10.09.2018 08:02

Попытка использовать сторонний плагин jQuery. Когда у меня будет больше времени, я поищу альтернативу, чтобы справиться со всем в React и не смешивать эти две технологии. А пока мне нужна функциональность, которую предоставляет плагин.

— 10.09.2018 08:04

jquery reactjs

10.09.2018 07:38

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

1 229

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте свой метод в готовый обработчик:

jQuery(function($) {
  // your code here
});

Также вы можете вызвать метод jQuery в хуке componentDidMount:

componentDidMount() {
  // your jQuery code here
}

Если вы не хотите подключать свой метод jquery к самому компоненту и просто использовать его в html, вам также необходимо вставить React и ReactDom в свой файл:

// index.js
import { React } from 'react'
import { ReactDom } from 'react-dom'
import { $ } from 'jQuery'

// index.html
<script src = "index.js"></script>
<!-- your jquery hook -->

Похоже, это не помогло. Все еще не работает.

— 10.09.2018 07:49

См. Обновленный ответ.

— 10.09.2018 07:54

Я не совсем слежу за тобой. Код jQuery - это простой слушатель, сидящий на странице HTML. Вы хотите сказать, что я должен переместить его в компонент?

— 10.09.2018 07:58

Как мне вызвать слушателя jQuery из componentDidMount ()?

— 10.09.2018 08:01

Ответ обновлен.

— 10.09.2018 08:04

Ура !!! Это становится уродливо! Мне не нравится идея смешивать React и jQuery для начала. Со всеми этими обходными путями я начинаю думать, что мне просто нужно придумать лучшее решение сейчас, а не позже.

— 10.09.2018 08:06

Я ценю вашу помощь! Спасибо!

— 10.09.2018 08:06

10.09.2018 07:44