时间戳

首页 > 解决方案 > Material UI 中的嵌套按钮：如何在单击子按钮时禁用容器按钮的波纹效果？

javascript - Material UI 中的嵌套按钮：如何在单击子按钮时禁用容器按钮的波纹效果？

问题描述

我正在尝试将一个按钮嵌套到另一个按钮中（IconButton内部ListItem带有button道具）。问题是ListItem即使我点击了波纹动画也会被触发IconButton。我希望它仅在我直接单击ListItem元素时触发

我试过绝对定位IconButton，但没有帮助

看例子

标签： javascriptreactjsmaterial-ui

解决方案

你可以这样做：

function App() {
  const mouseDown = e => {
    e.stopPropagation ();
  }
  return (
    <ListItem button>
      Some text
      <IconButton onMouseDown={mouseDown}>
        <Favorite />
      </IconButton>
    </ListItem>
  );
}

或者通过包装 Button<ListItemSecondaryAction>也将禁用波纹效果，但会将图标移动到最终项目，这可以用一些 css 修复。

希望这可以帮助。快乐编码

推荐阅读