reactjs - Material UI 单独旋转菜单图标

Question

当我单击导航栏中的一个按钮时，我只想翻转一个图标而不是导航栏中的所有图标。现在，当我单击一个按钮时，所有图标都会翻转，而不仅仅是我单击的那个。

这是一个演示：https ://codesandbox.io/s/festive-frost-53nny

任何帮助是极大的赞赏。

标签： reactjsmaterial-ui

Answer 1

您正在为所有项目使用一种打开状态。创建一个开放项目数组，例如您的锚点数组。

import "./styles.css";
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Button from "@material-ui/core/Button";
import { KeyboardArrowUp } from "@material-ui/icons";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";

import { menuItems } from "./menuItems";

const useStyles = makeStyles((theme) => ({
  openX: {
    transform: "scaleX(1)"
  },
  closeX: {
    transform: "scaleX(-1)"
  },
  openY: {
    transform: "scaleY(1)"
  },
  closeY: {
    transform: "scaleY(-1)"
  }
}));

export default function App() {
  const classes = useStyles();

  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (index, event) => {
    setAnchorEl({ [index]: event.currentTarget });

    setOpen((prevState) => {
      const newState = [...prevState];
      newState[index] = !prevState[index];
      return newState;
    });
  };

  const [open, setOpen] = React.useState(
    new Array(Object.keys(menuItems).length).fill(false)
  );

  return (
    <AppBar>
      <Toolbar>
        <div>
          {Object.keys(menuItems).map((item, index) => (
            <div key={index}>
              <React.Fragment>
                <Button onClick={(e) => handleClick(index, e)}>
                  {item}
                  <KeyboardArrowUp
                    className={clsx(
                      !open[index] && classes.closeY,
                      open[index] && classes.openY
                    )}
                  />
                </Button>
              </React.Fragment>
            </div>
          ))}
        </div>
      </Toolbar>
    </AppBar>
  );
}