如何让 Ant 设计子菜单在 React 功能组件中保持打开状态答案

【问题标题】：How can i make Ant design subMenu stay open in React functional component如何让 Ant 设计子菜单在 React 功能组件中保持打开状态
【发布时间】：2020-10-02 07:29:33
【问题描述】：

我正在使用 Ant Designs(version 3.3) subMenu 组件。在我单击该子菜单内的链接后，子菜单会折叠（见图）。我怎样才能让它保持打开状态？

const Menu = () => {

return (
   <Menu
      defaultSelectedKeys="start"
      defaultOpenKeys="start"
      mode="inline"      
    >
    <SubMenu
        key="admin"
        title={
          <span>
            <span>Admin</span>
          </span>
        }
      >
          <Menu.Item key="setup">
            <Link href="/setup/[programId]" as={`/setup/${programId}`}>
              <a>Program</a>
            </Link>
          </Menu.Item>
      </SubMenu>
    </Menu>
)}

我尝试添加一个 useState 挂钩，但它不起作用。但是，如果将字符串直接放入 openKeys 道具中，它可以工作，但它的 ofc 是静态的。

const Menu = () => {
  const [openTab, setOpenTab] = useState("");
 const onOpenKeysChange = (props) => {
    setOpenTab(props);
  };

  return (
   <Menu
      defaultSelectedKeys="start"
      defaultOpenKeys="start"
      mode="inline"
      onOpenChange={onOpenKeysChange}

      // Not working
      openKeys={openTab}
      // Works static
      openKeys="setup"
    >
   <SubMenu
        key="admin"
        title={
          <span>
            <span>Admin</span>
          </span>
        }
      >
          <Menu.Item key="setup">
            <Link href="/setup/[programId]" as={`/setup/${programId}`}>
              <a>Program</a>
            </Link>
          </Menu.Item>
      </SubMenu>
    </Menu> 
)}

【问题讨论】：

你看到官方的例子了吗？在该示例中，codesandbox.io/s/vxjfp 子菜单在单击后不会折叠。

标签： javascript reactjs react-functional-component

【解决方案1】：

您必须为onOpenKeysChange 提供一个参数，例如尝试onOpenKeysChange("static")

【讨论】：

我已经获得了 onOpenKeysChange 的道具。如果我添加参数，我会得到许多钩子和内部 500 的渲染
然后尝试像箭头函数一样在这里添加 onOpenChange={()=>onOpenKeysChange}