目前,我正在使用ReactJS(我是一个初学者)。 我想要做的是在站点导航中单击链接时显示/隐藏菜单组件。 菜单被构建为位于组件(标题)中的组件。

用户单击菜单按钮,然后切换要显示或隐藏的菜单,但是我在确定显示和隐藏菜单组件的逻辑应该存在的位置时遇到了问题,我基本上想添加并隐藏将一个类删除到菜单组件以显示或隐藏它。

我的登录和注册表单也有类似的显示/隐藏方法,但是这些显示/隐藏类是在标头组件而不是子组件中添加的,到目前为止,这是我的标头组件JS。

import React, { Component } from 'react'

从'prop-types'导入PropTypes

从'./menu'导入菜单; 从“ ../Login”导入LoginForm; 从“ ../Register”导入RegisterForm;

导出默认类探索扩展组件{

constructor(props) {
    super(props);
    this.state = {
        loginMenuVisible : false,
        registerMenuVisible : false,
        mainMenuVisible : false
    };
    console.log(this.state);
    //this.triggerMenu = this.triggerMenu.bind(this);
}

render() {
    return (
        <div className="site__navigation">
            <Menu />
            <header className="site__header">

                <a href="/"><img src="img/logo-full-color.png" alt="meatFree" /></a>

                <ul className="header__navigation">
                    <li className="header__navigation__item">
                        <a href="/register"  onClick={this.toggleMenu.bind(this, 'register')}>Register</a>
                        <ul className={this.state.registerMenuVisible ? "dropdown visible" : "dropdown"}>
                            <li>
                                <LoginForm />
                            </li>
                        </ul>
                    </li>
                    <li className="header__navigation__item">
                        <a href="#" onClick={this.toggleMenu.bind(this, 'login')}>Login</a>
                        <ul className={this.state.loginMenuVisible ? "dropdown visible" : "dropdown"}>
                            <li>
                                <LoginForm />
                            </li>
                        </ul>
                    </li>
                    <li className="header__navigation__item">
                        <a href="" className="nav__toggle">
                            Menu
                        </a>
                    </li>
                </ul>

            </header>
        </div>
    );
}

toggleMenu(type, e) {
    e.preventDefault();
    console.log(type);
    switch(type) {
        case 'login':
            if(this.state.loginMenuVisible) {
                this.setState({loginMenuVisible : false});
            } else {
                this.setState({
                    registerMenuVisible : false,
                    loginMenuVisible :  true
                });
            }
        break;

        case 'register':
            if(this.state.registerMenuVisible) {
                this.setState({registerMenu : false});
            } else {
                this.setState({
                    registerMenuVisible : true
                });
            }
        break;

        case 'menu':
            this.setState({mainMenuVisible : true });
    }
}

}

如您所见,我有一个名为mainMenuVisible的元素,我希望能够在Menu组件中进行操作。

#1楼 票数:0

如果使用ReactJ,则应考虑以下模式:

1.专门设置一个状态以显示/隐藏菜单

2.创建一个可以切换状态的函数

3.为组件菜单添加条件渲染

这是完成代码的方法:

第1步。

constructor(props) {
    super(props);
    this.state = {
        isComponenetMenuVisisble : false, // by default to disable it
    };
}

第2步。

toggleComponentMenu = () => {
    const isComponenetMenuVisisble = !this.state.isComponenetMenuVisisble;
    this.setState({ isComponenetMenuVisisble });
}

第三步

{this.state.isComponenetMenuVisisble && <Menu />}  
// if isComponenetMenuVisisble is true render <Menu />

然后您可以添加事件处理程序,如下所示

<div className="your-element" onClick={this.toggleComponentMenu}>
     ... your stuff
</div>

在上面的代码中突出显示的一个好地方是,我在步骤2中使用的是方法而不是函数。当使用方法而不是函数时,将不需要在事件处理程序上绑定该函数,因为此上下文将是类本身。 有关更多详细信息,请参见http://blog.andrewray.me/react-es6-autobinding-and-createclass/

#2楼 票数:0

我喜欢保持简单:

export default class Example extends Component {
    constructor(){
        super(props)
        this.state = {
            showMenu: false
        }

        this.menuShowToggle = this.menuShowToggle.bind(this);
    }

    menuShowToggle = () => {
        this.setState({showMenu: !this.state.showMenu})
    }

    render = () => { 
        return (
            <div>
                <div  className={this.state.showMenu ? 'showMenu': 'hideMenu'}>Hidden Menu</div>
                <button type="button" onClick={this.menuShowToggle} value="toggle" />
            </div>
        )
    }
}

#3楼 票数:0

要使用当前设置实现此目的,可以将toggleMenu()函数作为道具传递给渲染的Menu组件

 <Menu toggleMenu={this.toggleMenu} />

然后,在Menu组件内,您可以在点击处理程序中调用toggleMenu() ,并将“ menu”作为类型传递。

  ask by Udders translate from so

未解决问题?本站智能推荐:

1回复

如何根据数据库用户权限在本机反应中隐藏抽屉导航中的菜单?

我正在尝试使用 expo 制作一个反应原生项目。 我有一个用于登录的切换导航。 登录后,我有一个包含单独堆栈导航的抽屉导航。 对于每个屏幕,我想根据用户权限从抽屉导航中隐藏几个菜单,因为该应用程序将由管理员、员工、经理等使用。 或者有没有其他方法可以根据我的要求创建动态抽屉导航,并根据用户权限从数据
1回复

反应菜单/导航链接URL设置

我尝试将我的内部页面链接到一个用 React 制作的单页网页上的特定部分。 这是我的代码! 在此处输入图片说明在此处输入图片说明我试图阅读有关 react-router 的内容,但对我来说,我是 React 的新手,这对我来说没有多大意义。 谢谢 !
1回复

在反应模糊不关闭我的导航菜单

我是React的新手,并且在React中内置了一个导航菜单(.mega-menu-overlay),我将其更改为可单击,而不是在mouseover和mouseout上显示/隐藏。 使用onmouseover时,以前用来关闭菜单的函数称为handleMenuLeave()。 任何关于我在做什么
2回复

如果用户未登录,如何隐藏导航反应

路由.js 我想如果用户未登录,则必须隐藏导航栏。 这意味着当 route = '/login' 导航栏需要隐藏时。 你已经尝试了很多东西,但没有任何效果。 我是 React 的新手。 任何帮助将不胜感激?
1回复

反应导航问题试图隐藏底部标签导航

当我导航到消息室屏幕时,我试图隐藏底部选项卡,我尝试使用模态但无法让它工作......下面是我的代码,如果我得到一些帮助,将不胜感激这是我的根导航 下面也是底部标签导航 选项卡导航器之一的示例如下
3回复

如何在本机反应中隐藏特定屏幕上的底部导航栏?

我正在使用 React Native 和 React Native Navigation 来构建我的应用程序。 目前,我有三个底部选项卡:主页、上传视频和消息。 选择上传视频选项卡后,我想呈现上传视频组件并隐藏该屏幕上的底部选项卡,并显示带有“取消”(将它们带回 HomeView)和“发布”按钮(这
1回复

如何在反应stepzilla的某些步骤中隐藏导航按钮

我在反应 stepzilla 上有五个步骤,但第一步我想隐藏下一个按钮。 我试过了: 这对我没有帮助。 如何隐藏步骤 1 中的按钮?
1回复

隐藏带有反应路由器的导航栏

进入注册页面时,我无法禁用导航栏。 我只希望导航栏在我的用户完成登录后显示,该登录具有路由“ /”。 任何帮助将非常感激。 render() { return ( <App> <Main> <BrowserRouter> <div>