我有一个 CardActionArea
当我点击它时,它将我重定向到另一个页面。
<Card>
<CardContent>
<CardActionArea component={RouterLink} to={`/poll/${poll.id}`} >
// My code
</CardActionArea>
</CardContent>
</Card>
我把一个 Button
在 CardActionArea
,当 Button
点击了,它就会做其他的动作。
<Card>
<CardContent>
<CardActionArea component={RouterLink} to={`/poll/${poll.id}`} >
<Button onClick={props.myAction}>
{answer.text}
</Button>
</CardActionArea>
</CardContent>
</Card>
我的问题是:
当我点击 Button
,我还点击了 CardActionArea
...我不想点击... CardActionArea
但只是在 Button
并称我 myAction()
没有被重定向。
谁能帮帮我?
你需要调用 event.stopPropagation()
在按钮的 onClick
和 onMouseDown
的事件,以防止这些事件传播到。CardActionArea
. 停止点击事件的传播是最重要的方面,但停止鼠标下移事件的传播,可以防止波纹效应在 CardActionArea
所以波纹只发生在Button上)。
此外,如果 CardActionArea
组件以这样的方式被覆盖,使其成为一个 a
标签,您可能还需要调用 event.preventDefault()
事件中,以防止默认的浏览器行为,即导航到 href
指定的 a
标签。
下面是一个工作实例(基于其中的一个 演示):
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
root: {
maxWidth: 345
},
media: {
height: 140
}
});
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea
component="a"
href="https://material-ui.com"
onClick={() => console.log("CardActionArea clicked")}
>
<CardMedia
className={classes.media}
image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
<Button
size="small"
variant="contained"
color="primary"
onMouseDown={event => event.stopPropagation()}
onClick={event => {
event.stopPropagation();
event.preventDefault();
console.log("Button clicked");
}}
>
Learn More
</Button>
</CardContent>
</CardActionArea>
</Card>
);
}