Question

我试图制作一个菜单，当您单击汉堡菜单时，该菜单使用CSS3淡入和淡出。我正在使用react-hamburger-menu。

尽管我不知道如何使用handleClick函数以及如何使它在单击菜单按钮或任何链接时触发在className上的切换。

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

这是我到目前为止编写的代码

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挂钩。

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

1 个答案: