在material-ui的手风琴中禁用折叠或展开答案

【问题标题】：Disabling collapse or expand in accordion of material-ui在material-ui的手风琴中禁用折叠或展开
【发布时间】：2018-08-17 18:02:51
【问题描述】：

我有一个 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>

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

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

【讨论】：

谢谢，这对我有用，因为我有 onChange 事件，我添加了 onClick，它会停止切换
如何用开关按钮做同样的事情？即使包含 event.stopPropagation() 也不起作用；在 onChange 里面。
好的，它只适用于 onClick。改变它 onClick 而不是 onChange 它有效。 stackoverflow.com/questions/34929267/…

【解决方案2】：

好吧，stopPropagation 可能会产生许多有趣的意外行为：

Like body 点击监听器不会被触发。
此外，您需要重新设置手风琴标题内部内容的样式，以确保占用整个内部空间来捕获点击事件

为什么不采用更简单的方式，纯 CSS：

.MuiAccordionSummary-root  {
  pointer-events: none;
}

【讨论】：

这还不清楚。我试过了，它没有按预期工作。