Quiero crear un juego simple que permita a los usuarios elegir una carta y revelar si el jugador ganó un premio o no. Quiero que cuando el usuario haga clic en la tarjeta, revele un mensaje si ganó o no, pero asegúrese de que después de hacer clic en una tarjeta, todos los botones estén desactivados y el jugador no pueda hacer clic/revelar los otros 2 componentes/mensaje de la tarjeta. 1. No puedo hacer que el botón deshabilite los otros botones cuando se hace clic. 2. Me cuesta asegurarme de que la carta ganadora sea diferente cada vez. Aquí está mi código
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; }Reaccionar
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> ); }Debe usar el estado que contiene la información, independientemente de si todas las tarjetas deben deshabilitarse o no. Luego, pase una función a la tarjeta, que cambia este estado.
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> ); }; Luego puede seleccionar la propiedad deshabilitada en CSS usando card:disabled {...} .