reactjs - 更改后的样式 onClick 适用于所有 ListItems 而不是单个 ListItems

Question

我正在开发一个菜单项，其代码在下面提供。我试图在单击时更改菜单项的样式。我已经应用了一个函数 clickHandler 来在选定和未选定状态之间切换。根据 menuItem 的状态，我想更改其样式。在当前情况下，如果我单击任何 ListItem，更改后的样式将应用于所有 ListItem 而不是一个。我怎样才能实现它？

import React, {Fragment, useCallback, useState} from 'react';
import {makeStyles, withStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import {Link} from "react-router-dom";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import Toolbar from "@material-ui/core/Toolbar";
import Box from "@material-ui/core/Box";
import List from "@material-ui/core/List";
import clsx from "clsx";

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
  appBar: {
    shadowColor: '#206a5d',
    margin: 0
  },
  active: {
    color: '#206a5d',
    borderBottom: '2px solid blue'
  },
}));


export function Submenu({items, header}) {
  const classes = useStyles();
  const [active, setActive] = useState(false)

  const clickHandler = () => {
    setActive((prev) => !prev);
  };



  return (
    <Fragment>
    <div className={classes.root}>
      <AppBar position="sticky"
              color="inherit"
              className={classes.appBar}
      >
        <Typography style={{marginLeft: '1.5rem'}}>
          <h1 style={{color:'#1f4068'}}>{header}</h1>
        </Typography>
        <div style={{display: 'flex',}}
        >
          {items.map(item =>
          <ListItem button
                    key={item.title}
                    onClick={clickHandler}
                    component={Link}
                    className={clsx(null, {[classes.active]: !active})}
                    to={item.to || '/404'}
                    style={{padding:'0.75rem', width: 'auto'}}
          >
            {item.title}
          </ListItem>
        )}
        </div>
      </AppBar>
    </div>
      </Fragment>
  );
}

Answer 1

如果要设置单个ListItem的样式，需要提供一个标识符作为参数给clickHandler，这样你就可以识别哪个被点击了，并根据它改变样式。