Material UI Accordion点击箭头无法切换开闭状态问题求助

问题原因 #

你的代码中，点击箭头时调用的handleChange函数会直接将expanded状态设置为当前面板ID，未判断该面板是否已处于展开状态，因此再次点击箭头时无法触发收起操作。

解决方案一：修改状态切换逻辑 #

调整handleChange函数，添加状态判断，实现点击箭头时的开闭切换：

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

  // 修改后的handleChange，实现状态切换
  const handleChange = (panel) => {
    setExpanded(prevState => prevState === panel ? false : panel);
  };
  
  const panelData = ["panel1", "panel2", "panel3", "panel4"];
  
  return (
    <div>
      {panelData.map((value, i) => {
        const panelId = `panel${i}`;
        return (
          <Accordion 
            key={panelId}
            expanded={expanded === panelId}
          >
            <AccordionSummary
              expandIcon={
                <ExpandMoreIcon
                  onClick={() => handleChange(panelId)}
                  style={{ cursor: "pointer" }}
                />
              }
              aria-controls={`${panelId}-content`}
              id={`${panelId}-header`}
            >
              fdsfdsf
            </AccordionSummary>
            <AccordionDetails>dfdf</AccordionDetails>
          </Accordion>
        );
      })}
    </div>
  );
}

逻辑说明：通过函数式更新setExpanded(prevState => ...)，判断当前展开面板是否为点击的面板：

• 若是，将expanded设为false（收起面板）
• 若不是，将expanded设为当前面板ID（展开面板）

解决方案二：使用Accordion内置的onChange事件（推荐） #

Material UI的Accordion组件本身提供onChange事件，会返回面板的展开状态isExpanded，利用该事件可贴合组件设计逻辑，同时保持点击面板标题区域和箭头的行为一致：

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

  // 使用组件内置的onChange回调
  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };
  
  const panelData = ["panel1", "panel2", "panel3", "panel4"];
  
  return (
    <div>
      {panelData.map((value, i) => {
        const panelId = `panel${i}`;
        return (
          <Accordion 
            key={panelId}
            expanded={expanded === panelId}
            onChange={handleChange(panelId)}
          >
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls={`${panelId}-content`}
              id={`${panelId}-header`}
            >
              fdsfdsf
            </AccordionSummary>
            <AccordionDetails>dfdf</AccordionDetails>
          </Accordion>
        );
      })}
    </div>
  );
}

说明：

1. 移除了给ExpandMoreIcon添加的自定义onClick事件，AccordionSummary默认会响应点击（包括图标区域）并触发Accordion的onChange
2. handleChange返回回调函数，接收组件传递的isExpanded参数，根据状态更新expanded值
3. 修正了原代码中的拼写错误：panaalData改为panelData，pannel改为panel

内容的提问来源于stack exchange，提问作者user12302978