React Material-UI点击按钮触发Accordion弹出功能实现问题求助

原代码存在的问题 #

• 缺失控制Accordion显隐的open状态变量，绑定的open={open}无有效值，Accordion默认直接展开
• 事件逻辑冲突：全局定义的handleClick调用了不存在的setOpen方法，组件内的handleClick仅修改了无实际作用的click1状态，未关联Accordion显隐控制
• makeStyles语法错误：箭头函数未返回createStyles的执行结果，会导致样式失效
• 后两个Accordion未绑定显隐控制属性，默认一直展示

修复后完整代码 #

import React from 'react';
import {
    createStyles,
    makeStyles,
  } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const useStyles=makeStyles((theme)=>{
  // 补充return返回样式定义
  return createStyles({
     Button:{
         position:"absolute",
         minWidth:200,
         marginTop:100
     },
  })
})

export default function Groupbutton(){
    const classes = useStyles();
    // 新增控制Accordion显隐的状态，初始值为false，默认隐藏
    const [open, setOpen] = React.useState(false);
    const handleClick = () => {
      // 点击按钮切换显隐状态，如果需要点击后一直展示可以直接写setOpen(true)
      setOpen(!open);
    };
    return(
        <span className={classes.Button}>
          <Button 
          labelid="simple_demo_button"
          id="demo-button"
          onClick={handleClick}
          variant="contained"
          color="primary"
          >
            Click
          </Button>
          <Accordion open={open} style={{marginTop:50,color:"white",backgroundColor:"grey",width:1000}}>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1a-content"
              id="panel1a-header"
            >
              <Typography>Accordion 1</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                malesuada lacus ex, sit amet blandit leo lobortis eget.
              </Typography>
            </AccordionDetails>
          </Accordion>
          {/* 给后两个Accordion也绑定open属性，点击按钮后才展示 */}
          <Accordion open={open}>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel2a-content"
              id="panel2a-header"
            >
              <Typography>Accordion 2</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                malesuada lacus ex, sit amet blandit leo lobortis eget.
              </Typography>
            </AccordionDetails>
          </Accordion>
          <Accordion disabled open={open}>
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel3a-content"
              id="panel3a-header"
            >
              <Typography>Disabled Accordion</Typography>
            </AccordionSummary>
          </Accordion>
        </span>
    );
}

改动说明 #

1. 修复makeStyles语法，补充return返回样式定义，保证样式正常生效
2. 组件内新增const [open, setOpen] = React.useState(false)状态，初始值为false保证Accordion默认隐藏
3. 重写handleClick事件，点击按钮切换open状态，控制Accordion显隐
4. 给后两个Accordion也绑定open={open}属性，实现点击按钮后所有Accordion才显示的需求
5. 删除了无效的click1状态和相关逻辑，简化代码

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