Добавление прослушивателей событий в 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>, поэтому может быть сложно нажать на это так, как вы это написали и видите результат.