как исправить ошибку при нажатии на верхнюю кнопку

Question

Перейдите по ссылке ниже и попробуйте нажать кнопку

Он запускается в кодах и в окне

введите описание изображения здесь

https://codesandbox.io/s/menuantd-ewelm

Answer 1

Обновлено:

Я предпочитаю делать следующее, управляя openKeys без фактического изменения значений внутри него в состоянии, поэтому при методе рендеринга посмотрите комментарии в коде.

  render() {
    const { openKeys, collapsed } = this.state;
    // controllable openedKeys array that depends on collapsed value.
    const openedKeys = !collapsed ? openKeys : [];

    return (
      <div style={{ width: 256 }}>
        <Button
          type="primary"
          onClick={this.toggleCollapsed}
          style={{ marginBottom: 16 }}
        >
          <Icon type={this.state.collapsed ? "menu-unfold" : "menu-fold"} />
        </Button>
        <Menu
          openKeys={openedKeys} //passed the new controllable array here
          onOpenChange={this.onOpenChange}
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
        >
...... rest of the code

================

Вам необходимо очистить массив openKeys от вашего состояния, в нем говорится, что подменю sub1открыт, когда он там, поэтому, нажав на кнопку, мы должны очистить его, чтобы закрыть открытые подменю.

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
      openKeys: [],
    });
  };

Конечно, добро пожаловать в StackOverflow, это радостно дающая платформу с большим количеством удивительных разработчиков, которые готовычтобы помочь там опыт.