Klondike游戏开发：如何检测点击的React空Pile组件

核心思路 #

空牌堆没有卡牌，没法通过卡牌ID匹配定位，所以直接给每个<Pile>组件绑定堆的唯一标识，点击时直接获取这个标识，无需依赖event.target的信息。

具体实现步骤 #

1. 给每个Pile组件添加堆标识

修改页面主框架中<Pile>的调用，给每个堆在点击事件中直接绑定堆名称参数：

return (
    <GameBase onClick={onClick}>
        <CardRow>
            {/* 空堆直接绑定堆名称，点击时传递标识 */}
            <Pile cards={state.stack1} spacing={0} onClick={() => onClick("stack1")}/>
            <Pile cards={state.stack2} spacing={0} onClick={() => onClick("stack2")}/>
            <Pile cards={state.stack3} spacing={0} onClick={() => onClick("stack3")}/>
            <Pile cards={state.stack4} spacing={0} onClick={() => onClick("stack4")}/>
            <CardRowGap/>
            <Pile cards={state.draw} spacing={0} onClick={() => onClick("draw")}/>
            <Pile cards={state.discard} spacing={0} onClick={() => onClick("discard")}/>
        </CardRow>
        <CardRow>
            {/* 带卡牌的堆也用同样方式简化逻辑 */}
            <Pile cards={state.pile1} onClick={() => onClick("pile1")}/>
            <Pile cards={state.pile2} onClick={() => onClick("pile2")}/>
            <Pile cards={state.pile3} onClick={() => onClick("pile3")}/>
            <Pile cards={state.pile4} onClick={() => onClick("pile4")}/>
            <Pile cards={state.pile5} onClick={() => onClick("pile5")}/>
            <Pile cards={state.pile6} onClick={() => onClick("pile6")}/>
            <Pile cards={state.pile7} onClick={() => onClick("pile7")}/>
        </CardRow>
        <div id="errorMsg"></div>
    </GameBase>
)

2. 重写onClick事件处理函数

直接根据传递的堆名称处理，同时兼容带卡牌堆的卡牌定位需求：

function onClick(pileName) {
    console.log("点击的堆：", pileName);
    
    // 统一处理堆的状态设置
    state.dst = pileName;
    state.ValidArea = true;

    // 如果是带卡牌的堆，需要定位具体卡牌时，可调整参数传递事件对象
    // 示例：修改Pile调用为 onClick={(e) => onClick(e, "pile6")}
    // 然后在函数中添加卡牌查找逻辑：
    // const cardId = event.target.id;
    // if (cardId) {
    //     const targetPile = state[pileName];
    //     const cardIndex = targetPile.findIndex(card => `${card.suit}:${card.value}` === cardId);
    //     if (cardIndex !== -1) {
    //         state.targetIndex = cardIndex;
    //     }
    // }
}

3. 简化原有的冗余遍历逻辑

原来针对每个堆单独写map遍历的方式可以彻底替换，通过堆名称直接获取对应state数组，用findIndex替代重复的map循环，减少代码冗余。

方案优势 #

• 彻底解决空堆无法识别的问题，无需依赖event.target的不确定信息。
• 带卡牌的堆也能复用同一套逻辑，代码更简洁易维护。
• 堆标识明确，后期扩展新堆时只需添加对应名称参数即可。

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