未在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>