reactjs - Material-UI：CardActionArea 中的按钮

Question

我有一个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()而不被重定向。

谁来帮帮我 ？

标签： reactjsmaterial-ui

Answer 1

您需要调用event.stopPropagation()ButtononClick和onMouseDown事件以防止这些事件传播到CardActionArea. 停止单击事件的传播是最重要的方面，但停止传播鼠标按下事件会阻止在 Button 上发生涟漪效应CardActionArea（因此涟漪仅发生在 Button 上）。

此外，如果CardActionArea组件以使其成为a标签的方式被覆盖，您可能还需要调用event.preventDefault()Button 的单击事件以防止浏览器默认导航到标签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>
  );
}