Как сделать динамическое состояние для нескольких Свернуть

Question

Мне нужно сделать Свернуть меню из данных массива,

Теперь я выбираю любое меню, но раскрываю все подменю

Я думаю, что моя проблема в том, что я не могу установитьуникальное состояние "открыто" для главного меню

Мне не нужно назначать "состояние" Для поддержки дополнительных данных в будущем, которые могут иметь 3 или 4

Я использую React.JS, материал-UI

пожалуйста, помогите мне

большое спасибо

const myData = [
  {
    id: '1',
    nameHeader: 'Header1',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  },
  {
    id: '2',
    nameHeader: 'Header2',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  }
]

class Myclass extends Component {
  state = { open: false }

  handleClick = () => {
    this.setState(state => ({ open: !state.open }))
  }

  render() {
    const { open } = this.state
    return (
      <div style={{ marginRight: '15px' }}>
        <List component="nav">
          {myData.map(each => (
            <React.Fragment key={each.id}>
              <ListItem button onClick={this.handleClick}>
                <ListItemText inset primary={each.nameHeader} />
                {open ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Divider />
              <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                  {each.subMenu.map(subData => (
                    <ListItem key={subData.id} button>
                      <ListItemText inset primary={subData.name} />
                    </ListItem>
                  ))}
                </List>
              </Collapse>
            </React.Fragment>
          ))}
        </List>
      </div>
    )
  }
}
export default Myclass

Answer 1

Я думаю, что моя проблема в том, что я не могу установить уникальное состояние "открыто" для главного меню

Почему-то да.У вас есть два разных (под) меню, которые вы хотите свернуть / развернуть, не влияя на другое меню.В связи с этим вам необходимо создать возможность сохранения текущего состояния «открыто» для каждого из меню в отдельности.

У вас уже есть уникальный идентификатор для разных меню, вы можете использовать их для достижениятвоя цельОдним из способов является расширение вашего состояния с помощью соответствующих настроек для ваших меню:

state = { settings: [{ id: "1", open: false }, { id: "2", open: false }] };

Это позволяет вам получить информацию о свернутом статусе каждого из ваших меню.

В соответствии счто вам нужно немного расширить функцию handleClick, чтобы изменить только состояние пункта меню, по которому вы щелкнули:

handleClick = id => {
  this.setState(state => ({
    ...state,
    settings: state.settings.map(item =>
      item.id === id ? { ...item, open: !item.open } : item
    )
  }));
};

А в вашей функции рендеринга вам нужно убедиться, что вы передаете правильный идентификаторпункт меню, который вы щелкнули в функции handleClick и который выбрал правильное открытое состояние.

<React.Fragment key={each.id}>
  <ListItem button onClick={() => this.handleClick(each.id)}>
    <ListItemText inset primary={each.nameHeader} />
    settings.find(item => item.id === each.id).open
    ? "expanded"
    : "collapsed"}
  </ListItem>
  <Divider />
  <Collapse
    in={settings.find(item => item.id === each.id).open}
    timeout="auto"
    unmountOnExit
  >
  <List component="div" disablePadding>
    {each.subMenu.map(subData => (
      <ListItem key={subData.id} button>
        <ListItemText inset primary={subData.name} />
      </ListItem>
     ))}
   </List>
 </Collapse>
</React.Fragment>

Смотрите, как он работает здесь: https://codesandbox.io/s/6xjz837j9z