如何从卡片列表 React 中关注特定卡片

Question

我正在使用 React 17.0.2 和 material ui，我想通过点击专注于卡片列表中的特定卡片（我附上一张图片来展示我的内容意思是)希望你能弄清楚我想要什么..

<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

将 onClick 函数附加到您的

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

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

示例感谢

Answer 2

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

创建一个 Dialog 组件，并在卡中附加一个 onClick，它将设置 Dialog Open 并添加您想要的 Dialog Data
创建一个包含对话框和卡片的组件，当你点击打开卡片时，它就在里面，这样你只需要自己控制每张卡片的打开

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

如何从卡片列表 React 中关注特定卡片

How to focus on specific card from card list React

html

css

grid

reactjs

material-ui