Question

我有一个手风琴材质的UI，在其中我还添加了一些图标，但是在单击这两个特定图标时，我不希望手风琴展开或折叠。我希望其他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>

For click of two icons ,i don't accordion to expand or collpase.Is this anyway related

Answer 1

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

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

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

Answer 2

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

不会触发类似正文点击侦听器。
此外，您需要重新设置手风琴标题内部内容的样式，以确保它占用整个内部空间来捕捉点击事件

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

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

禁用UI的折叠或放大

2 个答案: