如何创建支持单选的React可选Card组件 点击仅选中项显示边框

问题根因 #

你当前的实现里所有卡片共用了同一个布尔类型的选中状态变量，只要这个状态变为true，所有卡片的边框判断条件都会同时触发，自然会出现点击任意卡片全部加边框的问题。

核心修改逻辑 #

你需要把选中状态的存储逻辑从「是否有卡片选中」改成「记录当前选中的卡片唯一标识」，修改步骤如下：

• 将原来的isSelected布尔状态，替换为存储选中卡片标识的状态，比如selectedCardId，默认值设为null
• 渲染卡片时，每个卡片只需要判断自己的id和当前存储的选中id是否相等，相等才渲染选中边框
• 点击卡片时，直接将当前卡片的id赋值给选中状态变量即可实现单选效果

关键代码示例 #

状态定义修改 #

// 原错误实现
// const [isSelected, setIsSelected] = useState(false);

// 新实现，用id作为唯一标识
const [selectedCardId, setSelectedCardId] = useState(null);

卡片渲染逻辑修改 #

{cardData.map(item => (
  <div 
    key={item.id}
    className={`card-item ${selectedCardId === item.id ? 'card-active' : ''}`}
    onClick={() => setSelectedCardId(item.id)}
  >
    {/* 卡片内部内容 */}
  </div>
))}

对应CSS样式示例 #

.card-item {
  /* 卡片默认样式 */
  border: 1px solid #eee;
}
.card-active {
  /* 选中态边框样式 */
  border: 2px solid #1677ff;
}

可选优化点 #

• 如果需要支持点击已选中卡片取消选中，可以修改点击逻辑为：onClick={() => setSelectedCardId(prev => prev === item.id ? null : item.id)}
• 如果没有业务id可以暂时用数组索引代替，但如果后续数组会有增删、排序操作，还是建议用业务唯一id作为标识，避免选中状态错乱
• 选中状态也可以通过props传递给封装的Card组件，由组件内部判断样式展示，逻辑拆分更清晰

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