React 17 + Material UI 实现点击后聚焦卡片列表指定卡片的方法

核心实现思路 #

通过 React 状态管理当前选中的卡片唯一标识，点击卡片时更新状态，动态为匹配状态的卡片添加高亮聚焦样式，如需自动滚动到对应卡片可配合 ref 实现。

具体实现步骤 #

• 步骤1：定义状态存储激活卡片ID，同时为每个卡片分配唯一标识

import { useState } from 'react';
// 假设你的卡片列表数据结构如下，每个卡片有唯一id
const cardList = [
  { id: 1, title: 'דף צביעה', image: cardImage },
  // 其他卡片数据
];

function YourComponent() {
  // 存储当前激活的卡片ID
  const [activeCardId, setActiveCardId] = useState(null);
  // 你的样式定义
  const classes = useStyles();

• 步骤2：修改卡片渲染逻辑，绑定点击事件、动态添加激活样式

{cardList.map(card => (
  <Grid md={3} className={classes.card} key={card.id}>
    <Card 
      className={`${classes.root} ${activeCardId === card.id ? classes.activeCard : ''}`}
      style={{ cursor: "pointer" }}
      onClick={() => setActiveCardId(card.id)}
    >
      <CardHeader title={card.title} />
      <CardMedia
        className={classes.media}
        image={card.image}
        title="Paint"
      />
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="share">
          <ShareIcon />
        </IconButton>
        <Button>הורדה</Button>
      </CardActions>
    </Card>
  </Grid>
))}

• 步骤3：添加激活状态的聚焦样式（以MUI v4的makeStyles为例，v5可替换为styled写法，逻辑一致）

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  root: {
    // 原有卡片样式
    transition: 'all 0.3s ease', // 添加过渡动画效果更流畅
  },
  activeCard: {
    // 自定义聚焦效果，可根据需求调整参数
    border: '2px solid #1976d2',
    boxShadow: '0 0 12px rgba(25, 118, 210, 0.6)',
    transform: 'scale(1.02)',
  },
  // 其他原有样式
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9比例
  },
}));

可选扩展：点击后自动滚动到聚焦卡片 #

如果卡片列表较长，需要点击后自动滚动到选中卡片位置，可配合ref实现：

import { useRef } from 'react';

// 定义ref存储所有卡片的dom引用
const cardRefs = useRef({});

// 点击时添加滚动逻辑
const handleCardClick = (cardId) => {
  setActiveCardId(cardId);
  cardRefs.current[cardId]?.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
  });
};

// 渲染时给每个Card绑定ref
<Card
  ref={el => cardRefs.current[card.id] = el}
  onClick={() => handleCardClick(card.id)}
  // 其他属性保持不变
/>

内容的提问来源于stack exchange，提问作者Yaniv Suriyano