在react material ui扩展面板中允许在特定文本上展开折叠

Question

在Expansion Panel上，我希望扩展或折叠应发生在特定区域。

相反，我想知道我们如何手动扩展或折叠扩展面板。

扩展面板代码和框链接
https://codesandbox.io/s/64187n5o9k

Answer 1

我将删除ExpansionPanel上的onChange事件。

<ExpansionPanel expanded={expanded === "panel1"}>

然后，您需要在要用于扩展的区域上使用click事件

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
    <Typography className={classes.heading}>
        General settings
    </Typography>
    <button type="button" onClick={this.handleChange("panel1")}>
        I am an expansion panel
    </button>
</ExpansionPanelSummary>

点击事件示例：

handleChange = panel => () => {
    this.setState({
        expanded: this.state.expanded !== panel ? panel : ""
    });
};