React映射列表中实现单次仅选中一个项的点击状态处理

我正在开发一款允许用户从列表中选择车辆的应用，现在遇到一个问题：把车辆数据映射成列表后，想给选中的单个车辆项设置样式类，但所有列表项都会被应用同一个类。预期是只有点击的那一项才显示边框样式，试过排除未点击ID、用名称代替ID、用布尔值做状态，都没解决。

原错误代码结构 #

虚拟数据 #

const tempMapObjects = [
    { id: 0, name: 'placeholder 1', vehicle: Vehicle1, alt: 'vehicle 1' },
    { id: 1, name: 'placeholder 2', vehicle: Vehicle2, alt: 'vehicle 2' },
];

初始状态 #

const [selectedIdClass, setSelectedIdClass] = useState(0);

点击处理器 #

const handleClickedVehicle = (id) => {
    console.log("reached handle Click")
    setSelectedIdClass(!id)
}

映射渲染代码 #

{tempMapObjects.map((obj) => {
    return (
        <div
            className={selectedIdClass ? style['Card2'] : style['Card']}
            key={obj.id}>
            <a className={style['ALink']}
                onClick={(e) => (
                    handleClickedVehicle({
                        id: obj.id
                    })
                )}>
                <img className={style['ImgDimensions']} src={obj.vehicle} alt={obj.alt} />
                <h6 className={style['StyleVehicleBox']}> {obj.name} </h6>
            </a>
        </div>
    )
})}

问题根源与修正方案 #

问题出在哪？ #

你现在的逻辑有两个核心错误：

1. 点击处理器里setSelectedIdClass(!id)是把ID转成布尔值（比如ID为0时，!0是true；ID为1时，!1是false），状态变成了布尔值，而非选中项的ID
2. 渲染时所有项都用同一个selectedIdClass判断，导致要么全用Card2，要么全用Card

修正后的完整代码 #

1. 调整状态定义

把状态改成存储选中项的ID，初始值设为null表示无选中项：

const [selectedVehicleId, setSelectedVehicleId] = useState(null);

2. 修正点击处理器

点击时直接存入当前项的ID，还可以加个逻辑：点击已选中的项就取消选中

const handleClickedVehicle = (id) => {
    console.log("reached handle Click")
    // 切换选中状态：已选中则取消，未选中则选中
    setSelectedVehicleId(prevId => prevId === id ? null : id);
}

3. 修正渲染逻辑

每个项单独判断自己的ID是否等于状态里的选中ID，再应用对应样式：

{tempMapObjects.map((obj) => {
    return (
        <div
            className={selectedVehicleId === obj.id ? style['Card2'] : style['Card']}
            key={obj.id}>
            <a 
                className={style['ALink']}
                onClick={(e) => {
                    e.preventDefault(); // 阻止a标签默认跳转（如果不需要跳转的话）
                    handleClickedVehicle(obj.id);
                }}>
                <img className={style['ImgDimensions']} src={obj.vehicle} alt={obj.alt} />
                <h6 className={style['StyleVehicleBox']}> {obj.name} </h6>
            </a>
        </div>
    )
})}

额外提示 #

• 状态变量名改成selectedVehicleId，语义更清晰，避免和样式类混淆
• 如果不需要a标签的跳转功能，一定要加e.preventDefault()，防止页面刷新

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