时间戳

首页 > 解决方案 > 无法在反应中使用 javascript 读取 null 的属性“addEventListener”？

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

问题描述

我正在尝试使用本机 javascript 来响应绑定事件。实际上我HTML从服务器获取了一些。我正在使用dangerouslySetInnerHTML设置 HTML。现在我想在来自服务器的传入 HTML 中绑定一个点击事件这是我的代码 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);
    };
  });

标签： javascriptreactjs

解决方案

这个问题是因为您的模板 -<button className="btn">set countor </button>如下所示。

在此处输入图像描述

因此，如果您尝试使用类查询选择器进行访问，它将返回未定义。您可以使用class而不是className.

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

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

推荐阅读