ReactJs-侧栏响应菜单系统在.map中，功能相同，无法区分

我在一个映射中有几个菜单项，带有单击功能，可以在单击时将类更改为显示子菜单。但是，所有子菜单都会在单击时打开

class SideNav extends Component {
  constructor(props) {
    super(props)

    this.state = {
        content: 'wrapper',
        navClass: 'vertical_nav',
        subMenuStatus :'menu--item  menu--item__has_sub_menu'
    };
  }

 //this is the function to open respective sub menu
  showSubMenu() {
    var index = this.state.subMenuStatus.indexOf('menu--subitens__opened');

    if(index != -1){
        this.setState({subMenuStatus: "menu--item  menu--item__has_sub_menu"});
    } else {
        this.setState({subMenuStatus: "menu--item  menu--item__has_sub_menu menu--subitens__opened"});
    }
}

..................
render(){
 return(
 {menuItems.map(function(menuItem, i) {
    if (menuItem.subMenus != undefined) {
      return (
        <li className={this.state.subMenuStatus} key={i}>
          <label onClick={this.showSubMenu.bind(this)} > <--- this guy
             <span className="menu--label">{menuItem.name}</span>
         </label>
            <ul className="sub_menu">
             .......
            </ul>
          </li>
        )
          }.bind(this))};
         ................
        )
     }
}

class SideNav扩展组件{
建造师（道具）{
超级（道具）
此.state={
内容：“包装器”，
导航类：“垂直导航”，
子菜单状态：“菜单--项目菜单--项目有子菜单”
};
}
//这是打开相应子菜单的功能
显示子菜单（）{
var index=this.state.subMenuStatus.indexOf（'menu--subitens\uu opened'）；
如果（索引！=-1）{
setState（{subMenuStatus:“菜单--项菜单--项菜单--项菜单有子菜单“}）；
}否则{
setState（{subMenuStatus:“菜单--项菜单--项菜单--项菜单有子菜单--子项菜单已打开”}）；
}
}
..................
render（）{
返回(
{menuItems.map（函数（menuItem，i）{
if（menuItem.subMenus！=未定义）{
返回(

所有子菜单都共享相同的类状态。我会将
子菜单状态转换为链接到每个菜单的对象


class SideNav扩展组件{
建造师（道具）{
超级（道具）
//迭代菜单项并生成状态
var subMenuStatus={}；
映射（函数（menuItem）{
子菜单状态[i.someKey]=“菜单——项目菜单——项目有子菜单”；
});
此.state={
内容：“包装器”，
导航类：“垂直导航”，
亚菜单：亚菜单
};
}
//这是打开相应子菜单的功能
显示子菜单（菜单项）{
var index=this.state.subMenuStatus[menuItem.someKey].indexOf（'menu--subitens\uu opened'）；
var newStatus=this.state.subMenuStatus；
如果（索引！=-1）{
newStatus[menuItem.someKey]=“菜单--项目菜单--项目有子菜单”；
}否则{
newStatus[menuItem.someKey]=“菜单--项菜单--项菜单已打开子菜单--子项菜单已打开”；
}
this.setState（{subMenuStatus:newStatus}）；
}
..................
render（）{
返回(
{menuItems.map（函数（menuItem，i）{
if（menuItem.subMenus！=未定义）{
返回(

注：这是一个转换后的示例：

我之所以称赞布拉德，是因为他为我指明了方向，尽管他的代码并不完全正确。另外，我增强了我的菜单，以便在单击打开新的子菜单时关闭以前打开的子菜单。

'use strict';
import React, {Component} from 'react';
import ReactDom from 'react-dom';

var menuItems = [
  {name: 'Item 1', subMenus: [{name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-3'}]},
  {name: 'Item 2'},
  {name: 'Item 3'},
  {name: 'Item 4', subMenus: [{name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-3'}]},
  {name: 'Item 5'}
]


class SideNav extends Component {
    constructor(props) {
    super(props)
    var subMenuStatus = {};
    menuItems.map(function(menuItem, i) {
        menuItem.someKey = i
        subMenuStatus[menuItem.someKey] = 'menu--item  menu--item__has_sub_menu';
    });
    this.state = {
        content: 'wrapper',
        navClass: 'vertical_nav',
        subMenuStatus : subMenuStatus
    };
}






你是如何区分菜单项的？onClick处理程序没有针对这一子项执行任何特定的操作…它们都绑定到相同的状态。我知道。这是我看不到的问题。即使使用道具，当只有一个菜单项应该打开时，所有菜单项都会打开。
menuItems
是存储还是什么？我可能会打开
…
进入它自己的菜单项组件，并使用它的内部状态进行显示。在我修复了这个问题后，我打算进行重构。即使组合为一个组件，也必须有一种方法来实现这一点。你能使
子菜单成为一个键/值对的对象，并将其设置为每个子菜单的键吗？布拉德，我相信你谢谢你的回答，但它不是完全正确的，而且我可以通过关闭以前的子菜单来增强我的菜单，这些子菜单可能是在单击新子菜单时打开的，以防你不想打开多个子菜单。我现在将粘贴整个代码。谢谢，太好了！我很高兴你至少能够修复它。
collapseSideBar() {
      var index = this.state.content.indexOf(' wrapper__minify');

      if (index != -1) {
          this.setState({content: 'wrapper'});
          this.setState({navClass: 'vertical_nav vertical_nav__opened'});
      } else {
          this.setState({content: 'wrapper wrapper__minify'});
          this.setState({navClass: 'vertical_nav vertical_nav__opened vertical_nav__minify'});
    }
}

toggleMobileMenu() {
    var index = this.state.content.indexOf('toggle-content');

    if (index != -1) {
        this.setState({navClass: 'vertical_nav'});
        this.setState({content: 'wrapper'});
    } else {
        this.setState({navClass: 'vertical_nav vertical_nav__opened'});
        this.setState({content: 'wrapper toggle-content'});
    }
}

showSubMenu(selMenuItem) {
    var newStatus = this.state.subMenuStatus;
    var index = this.state.subMenuStatus[selMenuItem.someKey].indexOf('menu--subitens__opened');

   // Enhancement- close previously opened sub menu
    menuItems.forEach(function(menuItem){
        if (selMenuItem.someKey != menuItem.someKey) {
            newStatus[menuItem.someKey] = "menu--item  menu--item__has_sub_menu";
        }
    })

    if(index != -1){
        newStatus[selMenuItem.someKey] = "menu--item  menu--item__has_sub_menu";
    } else {
        newStatus[selMenuItem.someKey] = "menu--item  menu--item__has_sub_menu menu--subitens__opened";
    }
    this.setState({subMenuStatus: newStatus});
}

// close any open submenu when non-parent menu is clicked
closeAllSubMenus() {
    var newStatus = this.state.subMenuStatus;
    menuItems.forEach(function (menuItem) {
            newStatus[menuItem.someKey] = "menu--item  menu--item__has_sub_menu";
    })
    this.setState({subMenuStatus: newStatus});
}

  render() {
    return (
        <section>
            <header className="header clearfix">
                <button type="button" id="toggleMenu" onClick={this.toggleMobileMenu.bind(this)} className="toggle_menu">
                    <i className="fa fa-bars"></i>
                </button>
                <h1>Vertical Responsive Menu</h1>
            </header>
            <nav className={this.state.navClass}>
                <ul id="js-menu" className="menu">
                    {menuItems.map(function (menuItem, i) {
                        if (menuItem.subMenus != undefined) {
                            return (
                                <li className={this.state.subMenuStatus[menuItem.someKey]} key={menuItem.someKey}>

                                    <label className="menu--link" onClick={this.showSubMenu.bind(this, menuItem)}>
                                        <i className="menu--icon  fa fa-fw fa-user"></i>
                                        <span className="menu--label">{menuItem.name}</span>
                                    </label>
                                    <ul className="sub_menu">
                                        {menuItem.subMenus.map(function (subMenu, i) {
                                            return (
                                                <li className="sub_menu--item" key={i}>
                                                    <a href="#"
                                                       className="sub_menu--link sub_menu--link__active">{subMenu.name}</a>
                                                </li>
                                            )
                                        })}
                                    </ul>
                                </li>
                            )
                        } else {
                            return (
                               <li className="menu--item" key={i} onClick={this.closeAllSubMenus.bind(this)}>
                                    <a href="#" className="menu--link" title={menuItem.name}>
                                        <i className="menu--icon  fa fa-fw fa-briefcase"></i>
                                        <span className="menu--label">{menuItem.name}</span>
                                    </a>
                                </li>
                            )
                        }
                    }.bind(this))};

                </ul>
                <button id="collapse_menu" className="collapse_menu" onClick={this.collapseSideBar.bind(this)}>
                    <i className="collapse_menu--icon  fa fa-fw"></i>
                    <span className="collapse_menu--label">Recolher menu</span>
                </button>
            </nav>
            <div className={this.state.content}>
                <h3>Vertical Responsive Menu Demo Page</h3>

                <p>Now is the time for all good men to come to the aid of their party</p>
            </div>
        </section>
    )
  }
}

module.exports = SideNav;

"react": "^0.14.0-beta3",
"react-dom": "^0.14.0-beta3",
"react-router": "^1.0.0-beta3",
"react-document-title": "^2.0.0",