未在React中呈现的元素上的火灾事件侦听器

Question

我已经在index.html中添加了一个外部脚本，该脚本在我的react组件内渲染了一个小部件（它将在我想要的位置渲染该小部件。它不是一个反应组件。） 我正在尝试在id renderDivHere内部渲染小部件。

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

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

小部件包含一些图形，数据和一个带有id =“ wl-nav-button”的按钮 。 我想听#wl-nav-button的click事件并调用this.handleClick()函数 。

我尝试了jquery.click()和document.getElementById(wl-nav-button).addEventListener("click", function(){this.handleClick()}); 。 但是两者都返回错误。

帮助我解决这个问题。

Answer 1

尝试以下代码：

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

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

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

它的作用是将事件侦听器添加到整个文档，您单击该按钮时便会触发它。 然后，进行检查以查看将clicked items id属性设置为什么。 如果id是您的按钮，则将触发handleClick()函数。

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

---

演示

这是一个简单的演示，仅演示了如何在React中向未使用React呈现的内容添加事件处理程序。

 class MyApp extends React.Component { componentDidMount() { document.addEventListener("click", this.navButtonListener); } componentWillUnmount() { document.removeEventListener("click", this.navButtonListener); } navButtonListener = (e) => { if (e.target.id == "wl-nav-button") { this.handleClick(); } } handleClick() { console.log("click!!"); } render() { return ( <div> <p>A button from a simulated external non-react library will be inserted asynchronically below:</p> <div id="my-container"></div> </div> ); } } ReactDOM.render(<MyApp />, document.getElementById("myApp")); //simulate a non-react library asynchronically inserting into the DOM: setTimeout(function() { var button = document.createElement("BUTTON"); var text = document.createTextNode("Click me!"); button.appendChild(text); button.setAttribute("id", "wl-nav-button"); document.getElementById("my-container").appendChild(button); }, 2000); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="myApp"></div>