如何手动设置手风琴关闭按钮

Question

我是React的新手。这是我目前拥有的代码。我去掉了一些不需要的部件以保持清洁。

<AccordionSummary
expandIcon={}
aria-controls="panel1a-content"
>This is Accordian
<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"
name="Yes"
control={<Radio onChange={handleChange} />}
label="Yes"
/>
<FormControlLabel
value="no"
name="No"
control={<Radio onChange={handleChange} />}
label="No"
/>

</RadioGroup>
</FormControl>
</Grid>
</Grid>
<Grid>
<Button className={classes.button_dark} variant="contained">
Submit
</Button>
<Button className={classes.button_light}>Cancel</Button>
</Grid>
</AccordionDetails>

我使用控制手风琴，我想改变，但我尝试了各种组合参考MUI docx，但我没有得到任何soln.这是我使用的状态，但这是一个单选按钮。

const [value, setValue] = React.useState("");
const handleChange = (e) => {
const {value} = e.target;
setValue(value);
};

我想要的是，每当我点击取消按钮，手风琴应该隐藏。展开图标正常工作，但这里我想在按下取消按钮时隐藏手风琴。

Answer 1

在MUIAccordion中有一个名为expanded的属性，它接受布尔值，并使用它可以手动控制扩展和隐藏根据。你需要维护一个状态来做到这一点。下面是一个基本的例子:

const [expanded, setExpanded] = React.useState();
<Accordion expanded={expanded === 'panel1'} onChange={() => setExpanded('panel1')}>
// items inside the accordion
<Button className={classes.button_light} onClick={() => setExpanded(undefined)}>Cancel</Button>
</Accordion>

这只是解决你问题的一个简单方法。详细信息请参考

下面是一个工作示例