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

Posted 2023-03-25

【中文标题】未在 React 中呈现的元素上的触发事件侦听器

【英文标题】：Fire event listener on element not rendered in React

【发布时间】：2017-06-29 08:48:48

【问题描述】：

我在我的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());。但两者都返回错误。

帮我解决这个问题。

【问题讨论】：

有什么错误？

你查过docs吗？

Webpack 捆绑返回错误。 Module build failed: SyntaxError: Unexpected token, expected ( (74:10) 在 document.get...

@FelixHäberle 检查了该链接。但是我不能在元素中给出onClick，因为它是由小部件脚本动态创建的

【参考方案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>

【讨论】：

在这里完美运行。但是在我的代码中返回了一些错误。 Uncaught TypeError: this.handleClick is not a function。检查问题。过段时间会更新

我的错。将navButtonListener 变成了箭头函数。现在像魅力一样工作。谢谢:)