reactjs React RMWC - TopAppBar、Drawer和useState typescript

55ooxyrt  于 2024-01-07  发布在  React
关注(0)|答案(1)|浏览(104)

我试图通过使用useState从顶部菜单控制抽屉。但是当我在onNav中使用这个时,汉堡菜单似乎保持不变,并且抽屉没有变化。查看控制台值正在更改ok。有趣的是,当你将其更改为正常布尔值时,汉堡菜单看起来不像冻结。问题在哪里?
我想有抽屉打开/关闭当我点击汉堡菜单,这也应该正确的行为

import { useState } from "react";
import { SimpleTopAppBar } from "@rmwc/top-app-bar";
import "@rmwc/top-app-bar/styles";
import "@rmwc/icon/styles";
import "@rmwc/drawer/styles";
import "@rmwc/list/styles";
import { Drawer, DrawerContent } from "@rmwc/drawer";
import { List, SimpleListItem } from "@rmwc/list";

function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);

  return (
    <>
      <SimpleTopAppBar
        title="Test menu list"
        navigationIcon
        onNav={() => {
          setIsNavOpen(!isNavOpen);
          console.log(isNavOpen);
        }}
        actionItems={[
          {
            icon: "file_download",
            onClick: () => console.log("Do Something"),
          },
          //   { icon: "print", onClick: () => console.log("Do Something") },
          { icon: "login", onClick: () => console.log("Do Something") },
        ]}
      />
      <Drawer open={isNavOpen}>
        <DrawerContent>
          <List twoLine>
            <SimpleListItem
              graphic="star_border"
              text="Cookies"
              secondaryText="Chocolate chip"
              metaIcon="info"
            />
            <SimpleListItem
              graphic="local_pizza"
              text="Pizza"
              secondaryText="Pepperoni"
              metaIcon="info"
            />
            <SimpleListItem
              activated
              graphic="mood"
              text="Icecream"
              secondaryText="Chocolate cookie dough"
              meta="Winner!"
            />
          </List>
        </DrawerContent>
      </Drawer>
    </>
  );
}

export default App;

字符串
Screenshot of the issue

Live example

xlpyo6sf

xlpyo6sf1#

将可丢弃的 prop 添加到抽屉组件。

<Drawer dismissible open={isNavOpen}>

字符串

相关问题