Question

我对导航响应菜单有问题。当我调整页面大小时，我可以看到汉堡菜单并且一切正常，但是我试图像在jquery中一样将一个toggle或slidetoggle放置在react中。我创建了一个toggle按钮，但是不能正常工作。上面是代码，我为汉堡菜单和状态cond创建了handleClick按钮。 CSS文件中的className =“ mynav”显示为：none;。我希望页面的尺寸很小并且我按下汉堡包按钮以查看菜单。

import React, { Component } from 'react'

import './Navbar.css';
import {Link} from 'react-router-dom';

export default class Navbar extends Component {

    state = {
        cond: false,

    }


    handleClick=()=>{
        this.setState({


           cond:!this.state.cond
        })
    }


  render() {


    return (


       <nav>
            <div className="mylogo">
                <div className="logo">
                    <a href="#home">logo</a>
                </div>

                <div id="mybtn" onClick={this.handleClick}>

                    <div className="bar1"></div>
                    <div className="bar2"></div>
                    <div className="bar3"></div>
                </div>



            </div>

            {this.state.cond ? <div className="mynav"  >
                <ul>
                    <li>
                        <Link to='/'>home</Link>
                    </li>

                    <li>
                        <Link to='/about'>About</Link>
                    </li>

                    <li>
                        <Link to='/projects'>Projects</Link>
                    </li>

                    <li>
                        <Link to='/contact'>Contact</Link>
                    </li>



                </ul>

            </div> :false

            }

       </nav>

    )
  }
}

Answer 1

让您在构造函数中声明状态，像这样：

export default class Navbar extends Component {
    constructor(props) {
        super(props)

        this.state = {
            cond: false,
        };
    }

然后，您的onClick方法将可以访问关键字“ this”。没有它就无法访问this.state。

Answer 2

感谢您的回答。它的工作原理相同。我同时使用状态和构造函数。当我按下汉堡包时，导航栏会出现，但是当我关闭它时，然后为更大的屏幕调整页面大小，导航不会出现。就像是被隐藏了。也许是因为我把状态弄错了。

React中响应式导航菜单的问题

2 个答案: