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

Question

我在我的index.html 中添加了一个外部脚本，它在我的反应组件中呈现一个小部件（它会在我想要的任何地方呈现小部件。它不是一个反应组件。）。我正在尝试在 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>