Как сбросить отцовский компонент на клик реагировать - PullRequest
0 голосов
/ 30 апреля 2019

Я делаю меню с подменю с 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 url

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;

This is my menu and submenu

Я надеюсь показать только один из пунктов меню одновременновремя.Большое спасибо!

...