Javascript 在React中未呈现的元素上激发事件侦听器

我已经在我的

index.html

中添加了一个外部脚本，它在我的react组件中呈现一个小部件（它将在我想要的地方呈现小部件。它不是一个reactive组件）。我试图在id

renderDivHere

中呈现小部件

handleClick() {
  console.log("clicked on widget button")
}

render () {
  <div>
    ......
    ......
    <div id="renderDivHere" />  // the external scripts will render the widget here
    ......
  </div>
}

handleClick（）{
log（“单击小部件按钮”）
}
渲染（）{
......
......
//外部脚本将在此处呈现小部件
......
}

该小部件包含一些图形、数据和带有id=“wl nav button”的按钮。我想收听

#wl nav按钮中的点击事件

并调用

this.handleClick（）

函数

我尝试了

jquery.click（）

和

document.getElementById（wl nav按钮）。addEventListener（“click”，function（）{this.handleClick（）}）。但两者都在返回错误

请帮助我解决此问题。
尝试使用以下代码：

componentDidMount() {
  document.addEventListener("click", this.navButtonListener);
}

componentWillUnmount() {
  document.removeEventListener("click", this.navButtonListener);
}

navButtonListener = (e) => {
  if(e.target.id == "wl-nav-button"){
    this.handleClick();
  }
}

这样做的目的是将事件侦听器添加到整个文档中，并在单击时触发。然后，检查单击的items
id
属性设置为什么。如果
id
是您的按钮，它将触发
handleClick（）
函数

这还会在卸载组件之前从组件中删除事件侦听器


演示
下面是一个简单的演示，演示如何在React中添加事件处理程序，以处理未使用React呈现的内容


MyApp类扩展了React.Component{
componentDidMount（）{
document.addEventListener（“单击”，此.navButtonListener）；
}
组件将卸载（）{
document.removeEventListener（“单击”，此.navButtonListener）；
}
导航按钮列表器=（e）=>{
如果（e.target.id==“wl导航按钮”）{
这个。handleClick（）；
}
}
handleClick（）{
console.log（“单击！！”）；
}
render（）{
返回(
模拟外部非反应库中的按钮将在下面异步插入：

);
}
}
ReactDOM.render（，document.getElementById（“myApp”）；
//模拟异步插入DOM中的非react库：
setTimeout（函数（）{
var button=document.createElement（“按钮”）；
var text=document.createTextNode（“单击我！”）；
按钮。追加子项（文本）；
设置属性（“id”、“wl导航按钮”）；
document.getElementById（“我的容器”）.appendChild（按钮）；
}, 2000);

错误是什么？您是否查找了？网页包捆绑返回错误<代码>模块生成失败：语法错误：意外令牌，应为（（74:10）

在document.get…@FelixHäberle检查了该链接。但是我不能在元素中给出一个

onClick

，因为它是由小部件脚本动态创建的，在这里工作得很好。但是在我的代码中返回了一些错误。

Uncaught TypeError:this.handleClick不是一个函数

。检查问题。会在某个时间更新我的坏。Made

navButtonListener

转换为箭头函数。现在工作正常。谢谢：）