我需要根据箭头点击打开和关闭手风琴答案

【问题标题】：I need to open and close accordion based on arrow click我需要根据箭头点击打开和关闭手风琴
【发布时间】：2022-12-07 19:52:34
【问题描述】：

我正在使用 Material UI 手风琴我的问题是如果我点击箭头手风琴会打开但是我再次点击箭头它不会关闭我需要在用户点击箭头时设置它根据将关闭和打开基于箭头单击检查代码沙箱链接以获得更好的理解。

export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState(false);

  // const handleChange = (panel) => (event, isExpanded) => {
  //   setExpanded(isExpanded ? panel : false);
  // };
  const handleChange = (pannel) => {
    setExpanded(pannel);
  };
  const panaalData = ["panel1", "panel2", "panel3", "panel4"];
  return (
    <div>
      {panaalData.map((value, i) => {
        return (
          <Accordion expanded={expanded === `panel${i}`}>
            <AccordionSummary
              expandIcon={
                <ExpandMoreIcon
                  onClick={() => {
                    handleChange(`panel${i}`);
                  }}
                  style={{ cursor: "pointer" }}
                />
              }
              aria-controls="panel1d-content"
              id="panel1d-header"
            >
              fdsfdsf
            </AccordionSummary>
            <AccordionDetails>dfdf</AccordionDetails>
          </Accordion>
        );
      })}
    </div>
  );
}

Code SandBox Link

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我的意思是这项工作：

import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState(false);

  // Function to handle the accordion expansion
  const handleChange = (panel) => {
    // If the panel is already expanded, collapse it
    if (expanded === panel) {
      setExpanded(false);
    } else {
      setExpanded(panel);
    }
  };

  const panelData = ["panel1", "panel2", "panel3", "panel4"];

  return (
    <div>
      {panelData.map((value, i) => {
        return (
          <Accordion expanded={expanded === value}>
            <AccordionSummary
              expandIcon={
                <ExpandMoreIcon
                  onClick={() => {
                    handleChange(value);
                  }}
                  style={{ cursor: "pointer" }}
                />
              }
              aria-controls="panel1d-content"
              id="panel1d-header"
            >
              fdsfdsf
            </AccordionSummary>
            <AccordionDetails>dfdf</AccordionDetails>
          </Accordion>
        );
      })}
    </div>
  );
}

希望这有帮助！

【讨论】：

【解决方案2】：

在这种情况下，您需要重置面板。您可以在更改处理程序中执行此操作。

const handleChange = (pannel) => {
   setExpanded(expended === pannel ? '' : pannel);
};

【讨论】：

【解决方案3】：

要解决单击箭头时 Material UI 手风琴未关闭的问题，您可以修改 handleChange 函数以切换展开状态，而不是将其设置为面板值。您可以通过使用 ! 运算符在设置它之前否定 expanded 的当前值来执行此操作，如下所示：

const handleChange = (pannel) => {
  setExpanded(!expanded);
};

通过此更改，每次单击箭头时手风琴将在展开和折叠状态之间切换。您还可以更新 ExpandMoreIcon 的 onClick 处理程序，以将 pannel 值传递给 handleChange 函数，如下所示：

<ExpandMoreIcon
  onClick={() => {
    handleChange(pannel);
  }}
  style={{ cursor: "pointer" }}
/>

这将确保在单击箭头时展开或折叠正确的面板。您可以在以下 CodeSandbox 中找到此代码的工作示例：

https://codesandbox.io/s/material-ui-accordion-fix-4k4x0

我希望这有帮助！如果您有任何其他问题，请告诉我。

【讨论】：