材质用户界面-带有复选框的扩展面板

Question

我正在使用Material-UI进行UI设计。我正在使用集成了复选框的扩展面板。

请找到以下代码，

<ExpansionPanel 
    expanded={expanded === item.description} 
    onChange={this.handleChange(item.description)}
>
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
        <Grid item xs={1}>
            <Checkbox
                value="checkedB"
                color="primary"
            />
        </Grid>
        <Grid item xs={2}>
            <Typography className={classes.heading}>
                {item.description}
            </Typography>
        </Grid>
        <Typography className={classes.desc}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
        </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse malesuada lacus ex,
        sit amet blandit leo lobortis eget.
    </ExpansionPanelDetails>
</ExpansionPanel>

但是我面临一个问题，当我选中或取消选中复选框时，扩展面板会扩展或折叠。由于该复选框，我想避免在扩展面板上执行任何操作。我该如何实现？

提前致谢。

Answer 1

您可以停止传播事件：

function handleClickCheckbox(e) {
  e.stopPropagation();
  // do something
}

...

<Checkbox value="checkedB"
          color="primary"
          onClick={e => handleClickCheckbox(e)}
/>

https://codesandbox.io/s/431284p0m0

或更简单地说：

<Checkbox value="checkedB"
          color="primary"
          onClick={e => {e.stopPropagation();}}
/>

Answer 2

不是您问题的直接答案。但是通过使用以下代码，您只能通过图标打开/关闭扩展面板

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon onClick={() => {
               this.setState({
                 expansionPanelOpen: !this.state.expansionPanelOpen
               });
             }}/>}>
               ....