根据 Material-ui 禁用折叠或展开

Question

我有一个 MaterialUI 的手风琴，其中我还添加了一些图标，但是单击这两个特定图标时，我不希望手风琴展开或折叠。我希望onClick点击时发生其他事件，但不展开或折叠。这是我正在使用的代码。

<ExpansionPanel>
  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
    <Typography  className={classes.heading}>
      {name}
    </Typography>


  <ListItem>
      <ListItemText  />
      <IconButton color="primary" aria-label="Edit" onClick={onClickEdit}>
          <Edit />
      </IconButton>
      <IconButton onClick={onClickDelete} color="secondary" aria-label="Delete">
          <Delete />
      </IconButton>
  </ListItem>
</ExpansionPanelSummary>
           

对于单击两个图标，我不希望手风琴展开或折叠。这有关系吗？

Answer 1

您可以在 onClickDelete 或 onClickEdit 函数中阻止事件向上冒泡到父级：

function onClickDelete(event) {
    event.stopPropagation();
    // Handle click here
}

这是一个粗略的示例： https ://codesandbox.io/s/54vypx6k9n