javascript - 在 React 中未渲染的元素上触发事件监听器

Question

我已经在我的 index.html 中添加了一个外部脚本，它在我的 react 组件内渲染一个小部件(它将在我想要的地方渲染该小部件。它不是一个 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中的点击事件并调用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();
  }
}

它的作用是向整个文档添加一个事件监听器，只要您单击该事件监听器就会触发该事件监听器。然后，检查单击的项目 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>