如何使用React-Hamburger-Menu设置汉堡包菜单？

Question

当我点击汉堡菜单时，我正在尝试制作一个使用CSS3淡入淡出的菜单。我正在使用react-hamburger-menu。

虽然我无法弄清楚如何使用handleClick函数以及如何在单击菜单按钮或其中任何链接时触发className上的切换。

如果重要的话，我正在使用Gatsby反应启动器......

这是我到目前为止编码的内容

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import './Header.css'
import { HamburgerMenu } from "react-hamburger-menu";

handleClick() {
  this.setState({
      open: !this.state.open
  });
}

const Header = ({ siteTitle }) => (
  <div className="Header">
    <div className="HeaderGroup">
      <Link to="/" className="logo"><img src={require('../../images/logo.svg')} width="70" alt="Ryan B. Designs"/></Link>
      <HamburgerMenu 
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
      />
    </div>
    <div className={"MainNavigation "  + (this.state.open ? 'show' : 'hidden')}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About Me</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

我想要发生的是当我点击汉堡包按钮时，菜单淡入，当您单击关闭按钮或其中一个链接时，菜单将使用CSS3淡出。

Answer 1

除了注释中指出的语法错误@JaromandaX之外，您还在函数组件中使用setState。就像现在一样，this没有setState，它指向我相信的模块本身。它应该指向一个具有状态启动的React类组件：

class MyComponent extends React.Component {
  // gatsby default environment supports class properties
  state = {
      isOpen: false,
    }
  handleClick = () => this.setState({ ... }) // this is now MyComponent
  render() {
    return (...)
  }
}

或者你可以使用useState钩。