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

Question

我正在使用普通的javascript组件制作网页，但无法使组件上的事件侦听器正常工作，下面的代码引发错误“函数声明需要名称”。我试过在没有$ {}的情况下，只有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>标记内的文本内容，因此可能很难以编写方式单击它并查看结果。