React中如何通过Cancel按钮手动关闭MUI Accordion组件

你需要给Accordion添加受控的展开状态，通过Cancel按钮的点击事件修改该状态，就能实现收起效果，同时保留展开图标的原有功能。以下是完整的修改方案：

状态与事件处理部分 #

const [value, setValue] = React.useState("");
// 新增控制Accordion展开状态的state
const [expanded, setExpanded] = React.useState(false);

const handleChange = (e) => {
  const { value } = e.target;
  setValue(value);
};

// 处理Accordion展开/收起的原生回调，保证展开图标功能正常
const handleAccordionToggle = (event, isExpanded) => {
  setExpanded(isExpanded);
};

// Cancel按钮点击时直接收起Accordion
const handleCancel = () => {
  setExpanded(false);
};

修改后的Accordion组件代码 #

<Accordion expanded={expanded} onChange={handleAccordionToggle}>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
  >
    This is Accordion
  </AccordionSummary>  
  <AccordionDetails>
    <Grid container spacing={4} mb={5}>
      <Grid item xs={12} md={6}>
        <FormControl>
          <RadioGroup
            aria-labelledby="demo-controlled-radio-buttons-group"
            name="controlled-radio-buttons-group"
            value={value}
            onChange={handleChange}
          >
            <FormControlLabel
              value="yes"
              control={<Radio />}
              label="Yes"
            />
            <FormControlLabel
              value="no"
              control={<Radio />}
              label="No"
            />
          </RadioGroup>
        </FormControl>
      </Grid>
    </Grid>
    <Grid>
      <Button className={classes.button_dark} variant="contained">
        Submit
      </Button>
      {/* 给Cancel按钮绑定点击事件 */}
      <Button className={classes.button_light} onClick={handleCancel}>
        Cancel
      </Button>
    </Grid>
  </AccordionDetails>
</Accordion>

关键说明 #

• expanded状态直接绑定到<Accordion>的expanded属性，实现受控模式
• handleAccordionToggle负责处理展开图标的点击逻辑，保证原有交互不受影响
• handleCancel函数通过修改expanded为false，直接触发Accordion收起
• 移除了FormControlLabel中重复的onChange绑定，因为RadioGroup已经统一处理单选状态变化

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