我试图通过使用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;
1条答案
按热度按时间xlpyo6sf1#
将可丢弃的 prop 添加到抽屉组件。
字符串