Блог

У меня есть следующий компонент react:

 type MobileNavProp = RouteTableProp


export default function MobileNav({routes}: MobileNavProp) {

    const classes = useStyles()

    const [drawerOpen, setDrawerOpen] = useState<boolean>(false)

    const handleOnClickItem = (event: React.MouseEvent<HTMLDivElement>): void => console.log(event.target)


    return (
        <React.Fragment>
            <IconButton
                className={classes.icon}
                color="inherit"
                aria-label="Open navigation"
                edge="end"
                onClick={() => setDrawerOpen(true)}
            >
                <MenuRoundedIcon fontSize="large"/>
            </IconButton>
            <SwipeableDrawer open={drawerOpen}
                             onClose={() => setDrawerOpen(false)}
                             onOpen={() => console.log("Drawer is open")}
                             disableBackdropTransition={!iOS}
                             anchor="top"
                             disableDiscovery={iOS}
            >
                <List subheader={
                    <ListSubheader component="div" id="logo" className={classes.company}>
                        <img className={classes.logo} src={logo} alt="databaker-logo"/>
                        <Typography variant="h6" className={classes.title}>
                            DATABAKER
                        </Typography>
                    </ListSubheader>
                }>
                    {
                        routes.map((rt, index) => (
                            <ListItem
                                divider
                                key={index}
                                button
                                onClick={handleOnClickItem}
                            >
                                <ListItemText primary={rt.name}/>
                            </ListItem>
                        ))
                    }
                </List>

            </SwipeableDrawer>
        </React.Fragment>
    )
}
 

Когда пользователь нажимает ListItem (функция обработчика — handleOnClickItem), он показывает мне:

 <span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">ABOUT US</span>
 

Тем не менее, я хотел бы получить индекс щелчка, который я предоставил:

 <ListItem
  divider
  key={index}...
 

Как его получить?

Вы можете создать handleOnClickItem функцию более высокого порядка, которая принимает индекс в качестве параметра, и вызвать ее:

 const makeHandleOnClickItem = (i: number) => (event: React.MouseEvent<HTMLDivElement>) => {
  console.log(event.target);
  console.log(i);
};
 

и изменить

 onClick={handleOnClickItem}
 

Для

 onClick={makeHandleOnClickItem(index)}