无法在反应中使用 javascript 读取 null 的属性“addEventListener”？

Question

I am trying to use native javascript in react to bind event.Actually I am getting some HTML from server.I am using dangerouslySetInnerHTML to set HTML.Now I want to bind a click event in incoming HTML from server here is my code https:/ /codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js

 useEffect(() => {
    const alertFunc = function () {
      alert("-----");
    };
    document.querySelector(".btn").addEventListener("click", alertFunc, false);
    // Specify how to clean up after this effect:
    return function cleanup() {
      document
        .querySelector(".btn")
        .removeEventListener("click", alertFunc, false);
    };
  });

Answer 1

这个问题是因为您的模板 - <button className="btn">set countor </button>正在重新设计，如下所示。

因此，如果您尝试使用 class 查询选择器访问，它将返回未定义。 您可以使用class代替className 。

 return {
    __html: '<button class="btn">set countor </button>'
  };

工作代码 - https://codesandbox.io/s/brave-meadow-qitjb?file=/src/App.js:87-157

Answer 2

这是因为您的 HTML 不是 HTML。 这是 JSX。 className是一个仅限 JavaScript 的属性。

代替：

<button className="btn">set countor </button>

你需要：

<button class="btn">set counter</button>