如何使用 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