javascript - 如何使用 JavaScript 选择 GatsbyJS 中的元素

Question

我的目标是检查导航栏中“hamburger”类的 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

您可能想查看Handling Events in the React Documentation了解这一点。以下是连接后代码的示例:

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