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

【问题标题】：How to use button collapse with material ui accordion?如何使用材料 ui 手风琴的按钮折叠？
【发布时间】：2020-11-04 19:06:14
【问题描述】：

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

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

我正在使用来自 material ui controlled accordion 的示例布局

打开手风琴示例：

封闭手风琴示例：

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

使用 Accordion 的 expanded 属性和状态将为您提供所需的内容。

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

这是一个代码沙箱example，我将如何解决它。

如果有帮助请告诉我！

编辑 - 代码示例：

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>
  );
}

【讨论】：

谢谢，帮了大忙！