如何处理从React功能组件中的单个按钮/图标打开和关闭Material UI Drawer？

Question

我想通过React功能组件中的单个按钮处理Material UI抽屉打开和关闭。

 const handleDrawerOpen = () => {
   setOpen(true);
 };

 const handleDrawerClose = () => {
   setOpen(false);
 };

 <IconButton
   color="inherit"
   aria-label="open drawer"
   onClick= ****
   edge="start"
   className={clsx(classes.menuButton)}
 >
   <MenuIcon />
 </IconButton>

Answer 1

您只需添加一个功能切换按钮，如下所示：

const toggleButton = () => {
  setOpen(preState => !preState);
}

onClick ={toggleButton}

Answer 2

基于现有状态进行切换怎么样？

const handleDrawerToggle = () => { setOpen(!open);}

Answer 3

您甚至不需要单独的处理程序，您可以内联完成：

<IconButton
   color="inherit"
   aria-label="open drawer"
   onClick= {()=> setOpen(!open)}
   edge="start"
   className={classes.menuButton}
 >
   <MenuIcon />
 </IconButton>

如果处理程序变得复杂，那么我会将其提取到一个函数中，以保持代码更整洁且更易于阅读。

Answer 4

如果你使用钩子，那么你只需要在你的组件函数中添加

useState

hook的用法：

const [isDropDownOnen, setDropDownOnen] = useState(false);
const handleDrawerClick = () => {
   setDropDownOnen(!isDropDownOnen);
 };

return (<IconButton
   color="inherit"
   aria-label="open drawer"
   onClick={handleDrawerClick}
   edge="start"
   className={clsx(classes.menuButton)}
 >
   <MenuIcon />
 </IconButton>);

Answer 5

抽屉将如何响应与抽屉本身无关的本地 useState 的更改？