阻止子组件触发父组件波纹

Question

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

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

当我单击 ListItem 内的任何内容时，会触发连锁反应，这是可以的，但是当我单击按钮时，我不希望触发父组件的连锁反应。我怎么做？

Answer 1

在按钮的点击处理程序中使用 event.stopPropagation() 。在你的情况下，在 foo() 函数内部