React点击单张卡片时如何动态为其余卡片批量设置状态

实现思路 #

你可以通过遍历原有cards数组生成新数组的方式，修改非点击卡片的状态。同时为了保证状态判断的稳定性，建议将flipped字段存储卡片id而非完整对象，避免引用类型比较带来的意外问题。

步骤1：调整state结构（可选，推荐） #

给每个卡片对象新增你需要的状态字段，比如用来标记非点击卡片的disabled状态：

state = {
    cards: [
        { id: 1, name: "p1", value: "Prize 1", imageSrc: "/path/to/image", bgColor: { background: "#FF6384", border: "4px solid #FF6384" }, disabled: false },
        // 其余卡片同理添加disabled: false即可
    ],
    flipped: null, // 后续存储点击卡片的id即可
};

步骤2：修改点击事件逻辑 #

利用setState的函数式写法拿到旧状态，遍历原cards数组，对不是当前点击的卡片统一设置状态：

clickHandler = (currentCard) => {
    if (this.state.flipped) {
        return;
    }
    this.setState(prevState => ({
        flipped: currentCard.id,
        // 生成新的cards数组，不直接修改原state
        cards: prevState.cards.map(card => {
            // 非当前点击的卡片，设置你需要的状态
            if (card.id !== currentCard.id) {
                return {
                    ...card,
                    disabled: true // 这里可以替换成你需要设置的任意状态字段和值
                }
            }
            // 当前点击的卡片保持原有属性，也可以按需新增状态
            return card
        })
    }));
};

步骤3：渲染时绑定状态 #

遍历卡片的时候可以直接拿到每个卡片的状态做对应处理，比如添加禁用样式：

<div
    className={`prize-card 
        ${this.state.flipped === card.id ? "flipped" : ""}
        ${card.disabled ? "disabled" : ""}
    `}
    onClick={() => this.clickHandler(card)}
>

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