未定义React'toggleBurgerMenu'no-undef

时间:2020-09-18 16:10:14

标签: reactjs

我是个新手。我正在尝试使用功能性应用程序,并想使用功能toggleBurgerMenu()。问题是,我不确定还需要定义什么。我应该使用props.toggleBurgerMenu()吗?

import React from 'react'
import { Link } from "react-router-dom";
import './Header.scss'

const Header = (props) => {

    toggleBurgerMenu = () => {
        document.querySelector('.navbar-menu').classList.toggle('is-active');
    }

    return (
        <div>
            <header>
                <nav className="navbar" role="navigation" aria-label="main navigation">

                    <div id="navbarBasicExample" className="navbar-menu">
                        <div className="navbar-start">

                            <Link to="/home" className="navbar-item" onClick={()=> this.toggleBurgerMenu()}>Home</Link>
                        </div>
                    </div>
                </nav>
            </header>
        </div>
    )

}


export default Header

感谢任何帮助。谢谢

2 个答案:

答案 0 :(得分:0)

您需要定义bufferArray这样的toggleBurgerMenu函数。然后您可以在const toggleBurgerMenu = () => { document.querySelector('.navbar-menu').classList.toggle('is-active'); }

这样的onClick事件中使用它

答案 1 :(得分:0)

最好的做法是不使用文档,而可以使用ref,但是在这种情况下,您可以添加一些状态并更新类名

这是一个简单的例子

const Header = (props) => {
    /** function to set the state of the button */
    const [isActive, setIsActive] = useState(initialState)
    return (
        <div>
            <header>
                <nav className="navbar" role="navigation" aria-label="main navigation">
                    {/**if its true we add is-active class there are several package to this*/}
                    <div id="navbarBasicExample" className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
                        <div className="navbar-start">

                            <Link to="/home" className="navbar-item" onClick={() => setIsActive(prev => !prev.setIsActive)}>Home</Link>
                        </div>
                    </div>
                </nav>
            </header>
        </div>
    )

}


export default Header