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 =＆＃34; wl-nav-button＆＃34; 的按钮。我想听取#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>

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

1 个答案:

演示