【问题标题】:How to focus on specific card from card list React如何专注于卡片列表中的特定卡片React
【发布时间】:2021-12-24 16:50:45
【问题描述】:

我正在使用带有材料 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>

【问题讨论】:

    标签: html css reactjs material-ui grid


    【解决方案1】:

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

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

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

    【讨论】:

      【解决方案2】:

      将 onClick 函数添加到您的

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

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

      示例感谢this thread

      【讨论】:

      • 你能给我一个代码示例吗?所有卡片都有相同的网格大小,点击卡片后如何更改网格大小或如何将卡片焦点放在所有屏幕上?
      • 我添加一个例子@yaniv
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-26
      • 2020-09-08
      相关资源
      最近更新 更多