Material-UI：如何实现仅点击展开图标时触发Accordion展开

实现方案 #

你可以通过将Accordion改为受控组件、拦截非图标区域的点击事件实现需求，具体修改如下：

1. 引入state手动管理面板的展开状态
2. 阻止AccordionSummary区域的默认点击冒泡，避免点击非图标区域触发展开
3. 将状态切换逻辑绑定到展开图标上

修改后完整代码 #

import React, { useState } from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() {
  // 受控管理展开状态
  const [expanded, setExpanded] = useState(false);

  return (
    <div style={{}}>
      <h4>How to create Accordion in ReactJS?</h4>
      <Accordion 
        style={{ width: 400}}
        expanded={expanded}
      >
        <AccordionSummary 
          expandIcon={<ExpandMoreIcon 
            onClick={() => setExpanded(!expanded)}
            style={{ cursor: 'pointer' }}
          />}
          aria-controls="panel1a-content"
          // 阻止整个summary区域的点击事件冒泡，避免触发默认展开逻辑
          onClick={(e) => e.stopPropagation()}
        >   
          <div>Click to Expand</div>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>Greetings of the day :)</Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

多面板场景适配 #

如果页面存在多个Accordion面板，可以把state改为存储当前展开的面板ID，切换时判断对应ID即可，逻辑和单面板完全一致。

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