Material-UI.Button 卡片动作区的按钮

问题描述 投票:1回答:1

我有一个 CardActionArea 当我点击它时,它将我重定向到另一个页面。

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

我把一个 ButtonCardActionArea,当 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() 没有被重定向。

谁能帮帮我?

reactjs material-ui
1个回答
1
投票

你需要调用 event.stopPropagation() 在按钮的 onClickonMouseDown 的事件,以防止这些事件传播到。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>
  );
}

Edit Button in CardActionArea

© www.soinside.com 2019 - 2024. All rights reserved.