Question

假设我有一个简单的代码，例如：


<ListItem
  button={true}
>
  <Typography variant='caption' color='primary'>
            {value}
  </Typography>
  <Button
    onClick={foo}
  >
    Button
  </Button>
</ListItem>

当我单击ListItem内的任何内容时，都会触发涟漪效应，这是可以的，但是当我单击按钮时，我不希望触发父组件的涟漪效应。我该怎么办？

Answer 1

在按钮的单击处理程序内使用event.stopPropagation（）。就您而言，在foo（）函数内部

Answer 2

您可以尝试使用disableRipple的{{1}}属性。单击按钮时将其设置为ListItem，单击列表项时将其设置为true，例如：

false

}

我创建了一个STACKBLITZ来玩

停止从子组件触发父组件波纹

2 个答案: