Как я могу использовать JavaScript для выбора элементов в GatsbyJS

Question

Моя цель - проверить наличие события onClick для класса "гамбургер" в навигационной панели.

Я настроил компонент и соответственно стилизовал его, однако я не уверен, как его вставить и куда вставить JavaScript, чтобы выбрать этот элемент и добавить прослушиватель событий.

Вот мой текущий код:

import React from "react"
import { Link } from "gatsby"
import "../styles/master.scss"
import headerStyles from "./header.module.scss"

const Header = () => {
  return (
    <header className={headerStyles.headerFlex}>
      <nav>
        <div className={headerStyles.hamburger}>
          <div className={headerStyles.line}></div>
          <div className={headerStyles.line}></div>
          <div className={headerStyles.line}></div>
        </div>
        <ul className={headerStyles.navLinks}>
          <li>
            <Link to="/blog" activeClassName="active">
              blog
            </Link>
          </li>
          <li>
            <Link to="/about" activeClassName="active">
              about
            </Link>
          </li>
          <li>
            <Link to="/portfolio" activeClassName="active">
              portfolio
            </Link>
          </li>
          <li>
            <Link to="/contact" activeClassName="active">
              contact
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

Answer 1

Вы можете просмотреть Обработка событий в документации React , чтобы узнать об этом. Вот пример того, как ваш код может выглядеть с этой проводкой:

import React from "react"
import { Link } from "gatsby"
import "../styles/master.scss"
import headerStyles from "./header.module.scss"

const Header = () => {
  const someAction = () => {
    console.log("Clicked")
  }
  return (
    <header className={headerStyles.headerFlex}>
      <nav>
        <div className={headerStyles.hamburger} onClick={someAction}>
          <div className={headerStyles.line}></div>
          <div className={headerStyles.line}></div>
          <div className={headerStyles.line}></div>
        </div>
        <ul className={headerStyles.navLinks}>
          <li>
            <Link to="/blog" activeClassName="active">
              blog
            </Link>
          </li>
          <li>
            <Link to="/about" activeClassName="active">
              about
            </Link>
          </li>
          <li>
            <Link to="/portfolio" activeClassName="active">
              portfolio
            </Link>
          </li>
          <li>
            <Link to="/contact" activeClassName="active">
              contact
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header