如何使多个崩溃的动态状态

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使多个崩溃的动态状态相关的知识,希望对你有一定的参考价值。

我需要从数组数据制作Collapse菜单,

现在我点击任何菜单,但展开所有子菜单

我认为我的问题是我可以,为主菜单设置唯一的状态“打开”

我不希望被分配“状态”以支持将来可能有3或4的其他数据

我使用的是React.js,material-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
答案

我认为我的问题是我可以,为主菜单设置唯一的状态“打开”

不知何故,是的。您有两个不同的(子)菜单,您希望折叠/展开而不影响其他菜单。考虑到这一点,您需要创建一个单独保存每个菜单的当前“打开”状态的可能性。

您已经拥有不同菜单的唯一ID,您可以使用它们来实现目标。一种方法是使用菜单的相关设置扩展您的状态:

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
    )
  }));
};

在渲染功能中,您需要确保将所单击的菜单项的正确ID传递给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

以上是关于如何使多个崩溃的动态状态的主要内容,如果未能解决你的问题,请参考以下文章

在片段中使用 CoordinatorLayout 时如何使状态栏透明

SocketTimeoutException 使应用程序崩溃

支持动态或静态片段的不同屏幕尺寸?

Android 片段不保存状态,在旋转/屏幕锁定/返回时崩溃

切换片段时如何维护子视图的状态?

你如何在片段中膨胀动态创建的对象?