reactjs - 如何使用材料 ui 手风琴的按钮折叠？

Question

我正在为折叠按钮和手风琴使用材质 UI。我希望人们能够单击“今天”按钮，然后打开第一个手风琴部分（上面写着星期六的部分）。今天按钮位于材质 UI 工具栏内。我也在项目中使用反应钩子。

我只是使用材料 UI 网站上显示的默认手风琴设置。每个手风琴都有自己的 id（例如：panel1、panel2 等）。

我正在使用材料 ui 控制的手风琴的示例布局

开放式手风琴示例：

封闭式手风琴示例：

你能给我的任何帮助都会很棒！谢谢。

标签： reactjsmaterial-ui

Answer 1

使用expandedAccordion 的属性和 state 将为您提供您正在寻找的东西。

请注意，一旦设置了expanded属性，手风琴的默认行为将被覆盖，您需要直接控制该行为。

这是我将如何解决它的代码沙箱示例。

让我知道它是否有帮助！

编辑 - 代码示例：

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Button
} from "@material-ui/core";
import React, { useState } from "react";
import "./styles.css";

const week = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];

const d = new Date();
const currentDay = week[d.getDay()];

export default function App() {
  const [openDay, setOpenDay] = useState("");

  function handleAccordClick(day) {
    if(openDay === day) setOpenDay("")
    if(openDay !== day) setOpenDay(day)
  }

  function generateWeekAccordion(day) {
    return (
      <Accordion
        expanded={day === openDay}
        onClick={() => handleAccordClick(day)}
      >
        <AccordionSummary>{day}</AccordionSummary>
        <AccordionDetails>{`${day} details...`}</AccordionDetails>
      </Accordion>
    );
  }

  return (
    <div className="App">
      <Button
        style={{ marginBottom: "20px" }}
        variant="outlined"
        onClick={() => setOpenDay(currentDay)}
      >
        Open Today
      </Button>
      {week.map((day) => generateWeekAccordion(day))}
    </div>
  );
}