[BUG] 在写了 onOpenChange的情况下，菜单无法正常缩放

[Muralitob]

Reproduction link

Steps to reproduce

在APP.tsx文件内把onOpenChange 注释开关一下就能看到

What is expected?

正常开关

What is actually happening?

无法正常缩放

Environment	Info
antd	undefined
React	17.0.0
System	mac
Browser	谷歌浏览器

[yoyo837]

再截个图吧，没看明白指的哪里

[Muralitob]

再截个图吧，没看明白指的哪里

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

根据你提供的信息，可以初步排查出问题是出在 onOpenChange 事件中引起的。可能是该事件中逻辑不正确导致菜单无法正常缩放。以下是一个示例的代码，使用 useState 来保持菜单状态，可以解决这个问题。

import React, { useState } from "react";
import { Layout, Menu } from "antd";

const { Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);

  const onCollapse = (collapsed: boolean) => {
    console.log(collapsed);
    setCollapsed(collapsed);
  };

  const onOpenChange = (keys:any ) => {
      console.log(keys);

  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline" onOpenChange={onOpenChange}>
          <Menu.Item key="1">
            <span>Option 1</span>
          </Menu.Item>
          <Menu.SubMenu key="sub1" title="Submenu">
            <Menu.Item key="2">Option 2</Menu.Item>
            <Menu.Item key="3">Option 3</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu key="sub2" title="Submenu">
            <Menu.Item key="4">Option 4</Menu.Item>
            <Menu.Item key="5">Option 5</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <h1>Hello world!</h1>
      </Layout>
    </Layout>
  );
};

export default App;

此外，Ant Design 官方文档中也提供了相关的示例，建议参考官方文档：折叠菜单