点击卡片组件中的图标按钮，不点击整张卡片

Question

我有一个可点击的卡片组件，它在卡片中包含一个图标按钮，我希望能够点击图标按钮，而不是用它点击整个卡片。

目前，当单击图标按钮时，涟漪效果会在整个卡片上运行，但我希望能够只单击图标按钮而看不到涟漪效果，但当我单击主卡时，我看到了涟漪效果。

我添加了一个codesandbox链接，其中包含我使用的代码：https://codesandbox.io/s/material-demo-forked-lbnbh?file=/demo.js

<Card className={classes.root}>
  <CardActionArea>
    <CardMedia className={classes.media} title="Con" />
    <CardContent>
      <IconButton aria-label="add to favorites">
        <AddBoxIcon style={{ fontSize: 50 }} />
      </IconButton>
    </CardContent>
  </CardActionArea>
</Card>

Answer 1

如果您希望激发子组件的单击事件，并且不将其传播到父组件，请使用e.stopPropagation()。

此外，如果要将传播应用于涟漪效果，请确保将处理程序附加到onMouseDown事件，而不是onClick。onClick事件在触发涟漪效果后触发，因此它不起作用。

<IconButton>
  <AddBoxIcon onMouseDown={e => e.stopPropagation()} />
</IconButton>

实时演示

​

​

Answer 2

你需要把onClick放在IconButton上。

const onIconClick =e=>{
console.log("In icon click")
}

<IconButton aria-label="add to favorites" onClick={onIconClick}>
        <AddBoxIcon style={{ fontSize: 50 }} />
      </IconButton>