Question

当我按下菜单中的一个按钮时，兄弟姐妹会打开。我需要每个按钮来承载其独立的内容。现在，所有独立分组的孩子一起出现在点击父亲的父亲上

这是我的代码。我对其进行编辑，将其分为两个问题，而不混合内容

class Nav extends Component{
    constructor(props){
        super(props)
        this.state = {
            menuSubmenu:[],
            abrirSubmenu: false,
        }
        this.submenuClick = this.submenuClick.bind(this);
    }
    submenuClick() {
        this.setState(state => ({
            abrirSubmenu: !state.abrirSubmenu
          }));
        //alert('Click!')
    }
    componentWillMount(){
        fetch('fake.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            const PadreMap = menuSubmenu.reduce((acc, obj) => {
                if (!acc[obj.Padre]) {
                  acc[obj.Padre] = {
                    ...obj,
                    Hijo: [obj.Hijo],
                    Description: [obj.Description]
                  };
                } else {
                  !acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Hijo);
                  //!acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Description)
                }
                return acc;
              }, {});

                this.setState({
                        menuSubmenu: Object.keys(PadreMap).map((padre) => ({
                        menu: padre,
                        submenu: PadreMap[padre].Hijo,
                        id: PadreMap.Id,
                        descripcion: PadreMap[padre].Description,
                        url: PadreMap[padre].URL
                }))

            })
            console.log(PadreMap);
        })
    }

    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} submenuClick={this.submenuClick} abrirSubmenu={this.state.abrirSubmenu}/>)}
                    </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{
    render(){
        return (
            <li key={this.props.id} className="list__item">
                <button title={this.props.menu} id={"mn-" + this.props.menu} className="desplegable" onClick={this.props.submenuClick}><Icon icon="auriculares" className='ico-auriculares'/>{this.props.menu}</button>
            {
            this.props.abrirSubmenu
                ? (
                <div id="sb-crm" className="submenu">
                    {this.props.submenu.map(hijo => <h3 className="nav--title"><Icon icon="descargar" className='ico-descargar'/>{hijo}</h3>)}
                    <ul className="list">
                        <li className="list__item">
                            {this.props.descripcion.map(tercerNivel => <a href={this.props.url} title={this.props.descripcion}>{tercerNivel}</a>)}
                        </li>
                    </ul>
                </div>
                )
                : (
                null
                )
            }
            </li>
        )
    }
}

export default Nav;

我还需要通过单击每个按钮（Padre）隐藏其他父母（Padre）的内容并仅显示您的父母。现在，它不起作用，并且在按下任何按钮时都会显示所有父母（Padre）内容

Answer 1

每个父母都需要有自己的状态。

const padreState = {};
// crear estado para cada padre
Object.keys(PadreMap).forEach(item => {
  padreState['padre-' + PadreMap[item].Id] = false;
});

this.setState({
  menuSubmenu: Object.keys(PadreMap).map(padre => ({
    menu: padre,
    submenu: PadreMap[padre].Hijo,
    id: PadreMap[padre].Id, // cambiaron desde PadreMap.Id
    descripcion: PadreMap[padre].Description,
    url: PadreMap[padre].URL
  })),
  padreState: padreState
});

子菜单onclick

toggle = padreState => {
  Object.keys(padreState).forEach(item => {
    padreState[item] = false;
  });
};

submenuClick(padre) {

  const { padreState } = this.state;
  const corriente = { ...padreState };

  const toggle = !corriente[padre];

  this.toggle(corriente); // toggle menu items
  corriente[padre] = toggle;

  this.setState({
    padreState: corriente
  });
  //alert('Click!')
}

在您的<Menu .../>

中调用该函数

submenuClick={() => this.submenuClick('padre-' + datos.id)}
abrirSubmenu={this.state.padreState['padre-' + datos.id]}

完整代码

class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuSubmenu: [],
      abrirSubmenu: false,
      padreState: {}
    };
    this.submenuClick = this.submenuClick.bind(this);
  }

  toggle = padreState => {
    Object.keys(padreState).forEach(item => {
      padreState[item] = false;
    });
  };

  submenuClick(padre) {

    const { padreState } = this.state;
    const corriente = { ...padreState };

    const toggle = !corriente[padre];

    this.toggle(corriente);
    corriente[padre] = toggle;

    this.setState({
      padreState: corriente
    });
    //alert('Click!')
  }

  componentWillMount() {
    fetch('fake.php')
      .then(response => response.json())
      .then(menuSubmenu => {
        const PadreMap = menuSubmenu.reduce((acc, obj) => {
          if (!acc[obj.Padre]) {
            acc[obj.Padre] = {
              ...obj,
              Hijo: [obj.Hijo],
              Description: [obj.Description]
            };
          } else {
            !acc[obj.Padre].Hijo.includes(obj.Hijo) &&
              acc[obj.Padre].Hijo.push(obj.Hijo);
            //!acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Description)
          }
          return acc;
        }, {});

        const padreState = {};
        // crear estado para cada padre
        Object.keys(PadreMap).forEach(item => {
          padreState['padre-' + PadreMap[item].Id] = false;
        });

        this.setState({
          menuSubmenu: Object.keys(PadreMap).map(padre => ({
            menu: padre,
            submenu: PadreMap[padre].Hijo,
            id: PadreMap[padre].Id, // cambiaron desde PadreMap.Id
            descripcion: PadreMap[padre].Description,
            url: PadreMap[padre].URL
          })),
          padreState: padreState
        });
        console.log(PadreMap);
      });
  }

  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}
                  submenuClick={() => this.submenuClick('padre-' + datos.id)}
                  abrirSubmenu={this.state.padreState['padre-' + datos.id]}
                />
              ))}
            </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 {
  render() {
    return (
      <li key={this.props.id} className="list__item">
        <button
          title={this.props.menu}
          id={'mn-' + this.props.menu}
          className="desplegable"
          onClick={this.props.submenuClick}
        >
          <Icon icon="auriculares" className="ico-auriculares" />
          {this.props.menu}
        </button>
        {this.props.abrirSubmenu ? (
          <div id="sb-crm" className="submenu">
            {this.props.submenu.map(hijo => (
              <h3 className="nav--title">
                <Icon icon="descargar" className="ico-descargar" />
                {hijo}
              </h3>
            ))}
            <ul className="list">
              <li className="list__item">
                {this.props.descripcion.map(tercerNivel => (
                  <a href={this.props.url} title={this.props.descripcion}>
                    {tercerNivel}
                  </a>
                ))}
              </li>
            </ul>
          </div>
        ) : null}
      </li>
    );
  }
}

export default Nav;

点击打开所有同级-React

1 个答案: