如何专注于卡片列表中的特定卡片React

Question

我正在使用带有材料 ui 的 React 17.0.2，我想通过点击关注卡片列表中的特定卡片（我附上一张图片来说明我的意思）我希望你能弄清楚我的意思想要..

<Grid md={3} className={classes.card}>
  <Card className={classes.root} style={{ cursor: "pointer" }}>
    <CardHeader title="דף צביעה" />
    <CardMedia
      className={classes.media}
      image={cardImage}
      title="Paint"
    />
    <CardActions disableSpacing>
      <IconButton aria-label="add to favorites">
        <FavoriteIcon />
      </IconButton>
      <IconButton aria-label="share">
        <ShareIcon />
      </IconButton>
      <Button>הורדה</Button>
    </CardActions>
  </Card>
</Grid>

Answer 1

您可以添加执行以下操作之一

1. 创建一个 Dialog 组件并在卡片上附加一个 onClick，它将设置 Dialog Open 并添加所需的 Dialog Data
2. 当您单击打开卡片时，创建一个包含对话框和卡片及其内部的组件，这样您只需单独控制每张卡片中的打开方式

我个人使用选项 2，因为这样我控制一个组件而不是所有组件，并且每次都重新渲染父组件

Answer 2

将 onClick 函数添加到您的

或者您可以使用 Button Base 中的 onClick 函数来包装组件内部的内容

    <Card>
      <ButtonBase
          className={props.classes.cardAction}
          onClick={event => { ... }}
      >
        <CardMedia ... />
        <CardContent>...</CardContent>
      </ButtonBase>
    </Card>

示例感谢this thread