React中如何为map渲染的卡片项设置单独点击选中边框样式

问题根源 #

你现在的实现有两个核心问题：

• 所有卡片的边框样式都绑定了同一个状态变量，所以状态更新时所有卡片都会同步变化，没有区分是否为当前选中项
• 状态更新函数调用错误，你定义的状态setter为setSelectedMediumColor，但代码中直接调用了selectedMediumColor()，运行时会触发报错

解决方案 #

把状态改为存储选中项的索引，渲染时单独判断每个卡片是否为选中状态，再赋值对应边框样式即可，修改后的完整代码如下：

1. 状态定义修改

// 初始值设为null代表没有选中项，也可以根据需求设置默认选中的索引
const [selectedMediumIndex, setSelectedMediumIndex] = useState(null)

2. 卡片渲染逻辑修改

<div>
    {mediumNames.map((text, index,) => (
    <Card 
      style={{ border: index === selectedMediumIndex ? '2px solid #00adb5' : '2px solid #fff' }} 
      onClick={() => onClickMedium(text,index)} 
    >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo} alt="logo"></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

3. 点击触发函数修改

const onClickMedium = (medium,indexno) => {
    console.log(medium)
    console.log(indexno)
    // 如果需要点击已选中卡片取消选中，可以改成下面的逻辑
    // setSelectedMediumIndex(selectedMediumIndex === indexno ? null : indexno)
    setSelectedMediumIndex(indexno)
}

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