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()没有被重定向。

谁来帮帮我 ？

Answer 1

您需要调用event.stopPropagation()在按钮的 onClick和 onMouseDown事件以防止这些事件传播到 CardActionArea .停止点击事件的传播是最重要的方面，但是停止鼠标按下事件的传播可以防止在 CardActionArea 上发生链式 react 。 (所以波纹只发生在按钮上)。

另外如果CardActionArea组件被覆盖，使其成为 a标签，您可能还需要调用 event.preventDefault()在 Button 的点击事件中防止导航到 href 的默认浏览器行为由 a 指定标签。

这是一个工作示例(基于 demos 之一):

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>
  );
}