在 JavaScript 个功能组件中添加事件侦听器

Question

我正在使用 vanilla javascript 组件制作网页，但我无法让组件上的事件侦听器正常工作，下面的代码会引发错误 "function statement requires a name"。我在没有 ${} 的情况下尝试过，只有 onclick="onClick"，但会抛出一条错误消息，提示未定义 onClick。这样做的正确方法是什么？谢谢。

const Navbar = () => {
  const onClick = () => {
    document.querySelector('#navbar').style.transform = 'translateX(0)';
  };

  const template = `
    <i id="nav-opener" class="fas fa-bars" onclick="${onClick}"></i>
    <div id="navbar">
      <ul>
        <li><a href="#!" target="_blank">Home</a></li>
        <li><a href="#!" target="_blank">About</a></li>
        <li><a href="#!"target="_blank">Portfolio</a></li>
      </ul>
    </div>
  `;

  return template;
};

export default Navbar;

Answer 1

因为看起来你只是在这里生成一个 HTML 字符串，你应该将 onclick 属性设置为你想要执行的 JavaScript 表达式的字符串。如果您在全局范围内的页面上的其他地方定义了该函数，则可以使用 onclick="myClickHandler()" 调用它。请注意，该函数是使用“()”执行的。您也可以将该函数的主体写入字符串，例如：

<i onclick="document.querySelector('#navbar').style.transform = 'translateX(0)';">

您似乎缺少 <i> 标记内的文本内容，因此可能很难按照您编写的方式单击它并查看结果。

在 JavaScript 个功能组件中添加事件侦听器

Adding event listeners in JavaScript functional components

javascript

dom

event-handling

dom-events