ReactJS toggleSlider 不适用于 <IconButton> 的 'onClick'

Question

我正在构建一个 ReactJs 网络应用程序。为了开发导航栏组件，我使用了一个滑块，它在单击箭头按钮后从右向左移动。

<IconButton onClick={toggleSlider("right", true)}>

以下是我用来开发导航栏滑块的完整代码：

import React, {useState} from "react";
import {makeStyles} from "@material-ui/styles";
import MobileRightMenuSlider from "@material-ui/core/Drawer";

import {
    AppBar,
    Toolbar,
    ListItem,
    ListItemIcon,
    IconButton,
    ListItemText,
    Avatar,
    Divider,
    List,
    Typography,
    Box
} from "@material-ui/core";

import {
    ArrowBack,
    AssignmentInd,
    Home,
    Apps,
    ContactMail

} from "@material-ui/icons";

import avatar from "../Assets/Images/avatar.png";

//CSS styles
const useStyles = makeStyles({
    menuSliderContainer:{
        width: 250,
        background: "#511",
        height: "30rem"
    },
    avatar:{
        display: "block",
        margin: "0.5rem auto",
        height: "6rem",
        width: "6rem"
    },
    listItem:{
        color: "tan"
    }
});

const menuItems = [
    {
        listIcon: <Home/>,
        listText: "Home"
    },
    {
        listIcon: <AssignmentInd/>,
        listText: "Resume"
    },
    {
        listIcon: <Apps/>,
        listText: "Portfolio"
    },    
    {
        listIcon: <ContactMail/>,
        listText: "Contact"
    },    
    {
        listIcon: <Home/>,
        listText: "Home"
    }
];

const Navbar = () => {

    const [state, setState] = useState({
        right: false
    });

    const toggleSlider = (slider, open) => () =>{
        setState({...state, [slider]:open});
    };

    const classes = useStyles();

    const sideList = slider =>(
        <Box component="div" className={classes.menuSliderContainer}>
            <Avatar src={avatar} className={classes.avatar} alt="Pawara Siriwardhane"/>
            <Divider/>
            <List>
                {menuItems.map((lsItem,key)=>(
                    <ListItem button key={key}>
                        <ListItemIcon className={classes.listItem}>
                            {lsItem.listIcon}
                        </ListItemIcon>
                        <ListItemText primary={lsItem.listText} className={classes.listItem}/>
                    </ListItem>
                ))}
            </List>
        </Box>
    )

    return (
        <>
            <Box component="nav">
                <AppBar position="static" style={{background:"#222"}}>
                    <Toolbar>
                        <IconButton onClick={toggleSlider("right", true)}>
                            <ArrowBack style={{color: "tomato"}}/>
                        </IconButton>
                        <Typography variant="h5" style={{color:"tan"}}> 
                            Portfolio 
                        </Typography>
                        <MobileRightMenuSlider
                            anchor="right"
                            Open={state.right} 
                        >
                            {sideList("right")}
                        </MobileRightMenuSlider>
                    </Toolbar>
                </AppBar>
            </Box>
        </>
    );
};

export default Navbar;

单击 <IconButton> 后，滑块应从左向右向左移动。但它不起作用。滑块保持隐藏状态，单击按钮后不会出现。我无法弄清楚此错误的原因。

如果有人能帮我解决问题，我将不胜感激。

提前致谢。

P.S.: 导航栏截图

Answer 1

您需要在 MobileRightMenuSlider

中将 Open 更改为 open

<MobileRightMenuSlider
  anchor={"right"}
  open={state.right} 
>
  {sideList("right")}
</MobileRightMenuSlider>

这使得抽屉从右边出现

Answer 2

<IconButton onClick={toggleSlider("right", true)}>

需要改为

<IconButton onClick={() => toggleSlider("right", true)}>

ReactJS toggleSlider 不适用于 <IconButton> 的 'onClick'

ReactJS toggleSlider is not working upon 'onClick' of <IconButton>

javascript

reactjs

material-ui

use-state