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() в событиях Button onClick и onMouseDown, чтобы предотвратить распространение этих событий на CardActionArea. Остановка распространения события щелчка является наиболее важным аспектом, но остановка распространения события нажатия мыши предотвращает появление эффекта ряби на CardActionArea (поэтому пульсация возникает только на кнопке).

Также если компонент 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>
  );
}