Material-UI：CardActionArea中的按钮

Question

我有一个 CardActionArea，当我点击它时会将我重定向到另一个页面：

<Card>
    <CardContent>
        <CardActionArea component={RouterLink} to={`/poll/${poll.id}`} >
            // My code
        </CardActionArea>
    </CardContent>
</Card>

我在CardActionArea中放置了一个Button，当点击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() 函数而不被重定向。

有人能帮我吗？

- Hippolyte BRINGER

Answer 1

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

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

这是一个工作示例（基于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>
  );
}

- Ryan Cogswell

---

它可以工作，但是我在控制台中收到一个错误，指出“<button>不能作为<button>的后代出现”。 - Stormwaker

在这个例子中，CardActionArea的component被覆盖为<a href...>而不是<button>，因此它就不会收到那个控制台错误。 - Ryan Cogswell

Answer 2

我发现涟漪效果在移动视图中运行。 所以我也设置了onTouchStart。

<Button

  // Stop Ripple Effect
  onTouchStart={(event) => event.stopPropagation()}
  onMouseDown={(event) => event.stopPropagation()}

  onClick={(event) => {
    // Prevent CardActionArea Click
    event.preventDefault()

    handleClick()
  }
>
  Learn More
</Button>

- KABA

---

确实，很好的回答。 - undefined