如何处理 Material UI 抽屉从 React 功能组件中的单个 button/icon 打开和关闭？

Question

我想通过中的一个按钮来处理MaterialUI抽屉打开和关闭 =18=]React 功能组件。

 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 handleDrawerToggle = () => { setOpen(!open);}

Answer 2

你只需像这样添加一个功能切换按钮：

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

onClick ={toggleButton}

Answer 3

如果你使用的是钩子，那么你只需要在你的组件函数中添加usage of 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 4

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

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

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

如何处理 Material UI 抽屉从 React 功能组件中的单个 button/icon 打开和关闭？

How to handle Material UI Drawer open and close from a single button/icon in React Functional Component?

reactjs

material-ui

webhooks