Question

我正在使用带有React子菜单的菜单。单击主菜单（示例：CRM）会创建子菜单（示例Hijo：Argumentarios），但是单击以下菜单项（示例Padre：Permisos）时，不会删除“ Argumentarios”，还会创建“ Permisos”子菜单。我需要在按菜单时显示其子菜单并消除其他兄弟姐妹的菜单。

这是我的json文件的一部分

[
   {
      "Id":"114",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"115",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"116",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"44",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"45",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"47",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"50",
      "Padre":"Telefonia",
      "Hijo":"Audio"
   },
   {
      "Id":"51",
      "Padre":"Telefonia",
      "Hijo":"Audio"
   }
]

出于机密原因，我无法显示实际文件。在我的下一个代码中，我更改了对假json网址的获取

import React, { Component } from 'react';
import Icon from './Icon';

class Nav extends Component{
    constructor(props){
        super(props)
        this.state = {
            menuSubmenu:[],
        }
    }

    componentWillMount(){
        fetch('fake/json_menu.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            menuSubmenu.forEach(datos => {
                let data = {
                    menu:datos.Padre,
                    submenu:datos.Hijo,
                    id:datos.Id,
                    descripcion:datos.Description,
                    url:datos.URL
                }

                this.setState({ 
                    menuSubmenu:this.state.menuSubmenu.concat([data])
                })
            })
        })
    }

    render() {
        if (this.state.menuSubmenu.length > 0) {
          return(
            <nav className="nav">
                <div className="menu">
                    <ul className="list">
                            {this.state.menuSubmenu.map(datos => <Menu key={datos.id} menu={datos.menu} submenu={datos.submenu} descripcion={datos.descripcion} url={datos.url}/>)}
                    </ul>

                    <div className="content-bnt">
                        <button id="desplegar" className='btn btn--rounded'>
                            <Icon icon="flecha" className='ico-flecha'/>
                        </button>
                    </div>  
                </div>
            </nav>
          );
        }
        return (<p>Cargando usuarios...</p>);
    }
}

class Menu extends Component{
    constructor(props){
        super(props)
        this.state = {
            abrirSubmenu: false,
        }
        this.submenuClick = this.submenuClick.bind(this);

    }
    submenuClick() {
        this.setState(state => ({
            abrirSubmenu: !state.abrirSubmenu
          }));
        //alert('Click!')
    }
    render(){
        return (
            <>
                <li className="list__item">
                    <button title={this.props.menu} id={"mn-" + this.props.menu} className="desplegable" onClick={this.submenuClick.bind(this)}><Icon icon="auriculares" className='ico-auriculares'/>{this.props.menu}</button>
                {
                this.state.abrirSubmenu
                    ? (
                    <div id="sb-crm" className="submenu">
                        <h3 className="nav--title"><Icon icon="descargar" className='ico-descargar'/>{this.props.submenu}</h3>
                        <ul className="list">
                            <li className="list__item">
                                <a href={this.props.url} title={this.props.descripcion}>{this.props.descripcion}</a>
                            </li>
                        </ul>
                    </div>
                    )
                    : (
                    null
                    )
                }
                </li>
            </>
        )
    }
}

export default Nav;

我希望只显示一个菜单项。 ¡非常感谢！

如何重置父组件onclick反应

0 个答案: