如何处理单独构建的React组件中使用jQuery和车把渲染的按钮的事件

Question

最近，我将一个React组件集成到一个网站中，其中包含使用jQuery 车把渲染的页面。 该网站的一部分具有一个产品列表，该产品列表使用jQuery handle bar呈现，如上所述，产品列表中的每个项目都有一个按钮

我要实现的是处理reactjs应用程序/组件中jQuery渲染的产品列表中按钮的点击事件。

我该如何实现？谢谢

eg，假设这是我的产品列表使用handing bar jquery呈现的nodejs应用程序

<ul>
  <li><button class="message">message</button></li>
 <li><button class="message">message</button></li>
 <li><button class="message">message</button></li>
</ul>

然后，我使用Create-React-App创建了一个单独构建的React应用程序/组件。如何访问DOM并处理这些按钮的点击事件，实现此目的的最佳方法是什么？

Answer 1

与无框架JS的方式相同。您可以在一种反应组件的生命周期方法中进行，例如：

componentDidMount() {
  document.querySelector("button.message...").addEventListener("click", event => 
    this.handleMessageButtonClick())
}

不过，您需要一种用class="message"区分多个按钮的方法。而且不要忘记删除componentWillUnmount()