如何获得所有按钮禁用，当一个按钮被点击在反应?

Question

我想创建一个简单的游戏，允许用户选择一张卡片，并显示玩家是否赢得了一个价格。我希望当用户点击卡片时，如果他们赢了，就会显示一条消息，但要确保在点击一张卡片后，所有按钮都被禁用，玩家不能点击/显示其他2个组件/卡片消息。1. 我不能让按钮禁用其他按钮时，它的点击。2. 我努力确保每次获胜的卡牌都是不同的。这是我的代码

CSS:

.cards{
background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
}
[class*=cardDisplay]{
height: 80%;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
background: black; 
color: white;
margin: auto;
}
[class*=card-content]{
display: none;
}
[class*=card-content-2]{
display: block;
}

反应

function Card({className, children}) {
const [styling, setStyling] = useState("card-content");

const handleClick = (e) => {
setStyling("card-content-2")
e.target.setAttribute('disabled', 'disabled')

};
return (
<div className={`cardDisplay ${className}`} >
<p className={styling}>{children}</p>
<button type="button"  onClick={handleClick}>
Click
</button>
</div>
);
};
function Game() {
return (
<div className="cards">
<Card className="card-1" children="win" onClick/>
<Card className="card-2" children="Sorry, no win"/>
<Card className="card-3" children="Sorry, no win"/>
</div>
);
}

Answer 1

您需要使用state来保存是否应该禁用所有卡片的信息。然后，向卡片传递一个函数，翻转这个状态。

function Game() {
const [cardsDisabled, setCardsDisabled] = useState(false);
const disableAllCards = () => setCardsDisabled(true);
return (
<div className="cards">
<Card className="card-1" 
children="win" 
isDisabled={cardsDisabled} 
disableAllCards={disableAllCards}/>
<Card className="card-2"
children="Sorry, no win"
isDisabled={cardsDisabled}
disableAllCards={disableAllCards}/>
<Card className="card-3"
children="Sorry, no win"
isDisabled={cardsDisabled}
disableAllCards={disableAllCards}/>
</div>
);
}
function Card({className, isDisabled, disableAllCards, children}) {
const [styling, setStyling] = useState("card-content");

const handleClick = (e) => {
disableAllCards();
};
return (
<div className={`cardDisplay ${className}`} >
<p className={styling}>{children}</p>
<button type="button"
disabled={isDisabled} 
onClick={handleClick}>
Click
</button>
</div>
);
};

你可以在CSS中使用card:disabled {...}来选择禁用属性。