如何基于多状态切换React Card组件的CSS类（含切换逻辑）

你的核心问题在于状态存储方式不统一，当前用selected、active等分散字段管理状态，导致多状态切换逻辑混乱，className也难以维护。改用统一的status字段管理卡片状态后，能轻松对应CSS类，同时简化切换逻辑。

第一步：重构App组件的状态管理 #

1. 初始化统一状态 #

给每个卡片添加status字段，默认值设为'active'：

function App() {
  const [people, setPeople] = useState(data['people'].map(el => ({
    ...el,
    key: nanoid(),
    status: 'active' // 统一用status管理所有状态，默认激活态
  })))

2. 重构状态切换函数 #

每个操作仅修改目标卡片的status字段，处理切换逻辑：

// 切换选中状态：active ↔ selected
function toggleSelected(CardKey) {
  setPeople(oldPeople => oldPeople.map(el => {
    if (el.key !== CardKey) return el;
    return {
      ...el,
      status: el.status === 'selected' ? 'active' : 'selected'
    };
  }))
}

// 切换丢弃状态：非discarded ↔ discarded
function toggleDiscarded(CardKey) {
  setPeople(oldPeople => oldPeople.map(el => {
    if (el.key !== CardKey) return el;
    return {
      ...el,
      status: el.status === 'discarded' ? 'active' : 'discarded'
    };
  }))
}

// 新增完成状态切换函数
function toggleComplete(CardKey) {
  setPeople(oldPeople => oldPeople.map(el => {
    if (el.key !== CardKey) return el;
    return {
      ...el,
      status: el.status === 'complete' ? 'active' : 'complete'
    };
  }))
}

3. 更新Card组件的Props传递 #

把新增的onToggleComplete函数传递给Card：

const cards = people.map(el => (
  <Card 
    key={el.key} 
    item={el} 
    onToggleSelected={() => toggleSelected(el.key)}
    onToggleDiscarded={() => toggleDiscarded(el.key)}
    onToggleComplete={() => toggleComplete(el.key)}
  />
))

第二步：重构Card组件的className与事件处理 #

1. 动态生成className #

通过映射表直接关联状态和CSS类，无需复杂嵌套：

function Card(props) {
  // 状态到CSS类的映射关系
  const statusClassMap = {
    active: '',
    selected: 'overlay-selected',
    discarded: 'overlay-discarded',
    complete: 'overlay-complete'
  };
  
  const className = `card ${statusClassMap[props.item.status]}`;

2. 修复按钮事件冒泡问题 #

按钮点击时用event.stopPropagation()阻止触发卡片的点击事件，简化逻辑：

return (
  <div className={className} onClick={() => props.onToggleSelected()}>
    <img className='card-img' alt='Card Image' src={props.item.img} />
    <h3 className='card-title'>{props.item.name}</h3>
    
    {props.item.status === 'selected' ? (
      <div className='card-cta'>
        <button 
          className='btn btn-back'
          onClick={(event) => {
            event.stopPropagation(); // 阻止冒泡到卡片容器
            props.onToggleSelected(); // 切回active状态
          }}
        >Back</button>
        <button 
          className='btn btn-discard'
          onClick={(event) => {
            event.stopPropagation();
            props.onToggleDiscarded();
          }}
        >Discard</button>
        <button 
          className='btn btn-complete'
          onClick={(event) => {
            event.stopPropagation();
            props.onToggleComplete();
          }}
        >Complete</button>
      </div>
    ) : (
      <p className='card-description'>{props.item.description}</p>
    )}
  </div>
);
}

关键改进点 #

1. 统一状态管理：用单个status字段替代分散字段，避免状态冲突（比如同时出现selected和discarded的矛盾情况）。
2. 简洁的className生成：映射表让状态与CSS类的对应关系一目了然，易维护。
3. 修复事件冒泡：按钮点击不会触发卡片的选中逻辑，操作更精准。
4. 完整覆盖需求：补充了complete状态的切换逻辑，符合最初的设计要求。

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