让React组件与jQuery监听器一起使用[复制]

问题描述 投票:0回答:1

这个问题在这里已有答案:

虽然这不是解决问题的最佳方法,但我确实需要我的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 reactjs
1个回答
0
投票

在ready处理程序中添加方法:

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

此外,您可以在componentDidMount钩子中调用jQuery方法:

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 -->
© www.soinside.com 2019 - 2024. All rights reserved.