触发手柄一次仅单击地图中的一项

Question

我正在开发一个应用程序，允许用户从列表中选择车辆。我目前遇到的问题是，当我尝试将车辆映射到列表并选择单个车辆来设置类别时，该列表中的所有其他项目也被设置为同一类别。以下是我遇到问题的代码结构：

此代码的预期结果是能够在映射的对象集中的单击项目周围设置单个边框。我尝试了几种不同的方法来设置它，包括尝试排除所有其他未单击的 id、设置为项目名称而不是 ID，以及使用 false/true 设置状态而不是 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>                                 )                             })}   

如何只设置地图列表中当前点击项目的状态，而不突出显示其他项目？

Answer 1

您需要确保

selectedIdClass

状态保存当前所选项目的 ID，并在渲染时将此 ID 与每个项目的 ID 进行比较，以决定应用哪个类。

首先，在

handleClickedVehicle

函数中，您需要将

id

路径到

setSelectedIdClass

状态。

const handleClickedVehicle = (id) => {
    setSelectedIdClass(id);
}

然后在循环中有条件地检查当前项

id

是否等于

selectedIdClass

。

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

另外，我建议将

selectedIdClass

重命名为

selectedItemId

（可选）