• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

154
Views
Cómo deshabilitar un componente de reacción (o onClick en sí mismo) con el evento onClick

He visto preguntas similares, pero ninguna de las respuestas funciona en mi caso y espero que alguien pueda decirme por qué.

Mi ReactApp renderiza 3 componentes de tarjeta que giran cuando se hace clic en ellos. Las tarjetas se rellenan con datos de una matriz de objetos y se representan con una función de mapa (información agregada en caso de que tenga un impacto). Aquí está el componente principal.

 import React from 'react' import FlipCard from './FlipCard' const cards = [ { id: 1, text: 'NOPE', }, { id: 2, text: '!!WINNER!!', }, { id: 3, text: 'NOPE', }, ] const shuffleCards = array => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) const temp = array[i] array[i] = array[j] array[j] = temp } return array } shuffleCards(cards) console.log(cards) const CardGameUI = () => { shuffleCards(cards) return ( <div className="cards-ui"> {cards.map(card => ( <FlipCard key={card.id} text={card.text} value={card.id} /> ))} </div> ) } export default CardGameUI

Cuando se voltea una de las tarjetas, necesito el onClick para deshabilitar las otras tarjetas. Intenté usar el estado y un condicional en mi evento onClick pero no tuvo efecto. De acuerdo con console.log, el estado del booleano de reproducción cambia y si cambio manualmente el condicional en el evento onCLick verifico si la reproducción es verdadera, entonces funciona perfectamente bien. Claramente me estoy perdiendo algo porque parece que el condicional está funcionando y el estado está cambiando.

 import React, { useState } from 'react' import ReactCardFlip from 'react-card-flip' import FrontComponent from './FrontComponent' import BackComponent from './BackComponent' const FlipCard = ({ text, value }) => { const [isFlipped, setIsFlipped] = useState(false) const [activeCard, setActiveCard] = useState(2) const [play, setPlay] = useState(false) console.log(play.valueOf()) function handleFlip() { setPlay(true) setIsFlipped(!isFlipped) console.log(isFlipped) setActiveCard(value) console.log(value) } if (activeCard !== 2) { console.log('Play again?') } return ( <> <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> <FrontComponent onClick={!play ? handleFlip : null} /> <BackComponent text={text} value={value} /> </ReactCardFlip> </> ) } export default FlipCard

¿Qué me estoy perdiendo?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Debe administrar el evento onClick y el estado de flip en el padre en lugar de dentro de la tarjeta.

Una descripción general de alto nivel será:

 const CardGameUI = () => { const [flipped, setFlipped] = useState({}); const hasFlipped = Object.values(flipped).includes(true); const handleFlip = id => () => setFlipped(flipped => ({ ...flipped, [id]: true // can be changed to toggle in case you need it in the future })); return ( <div> {cards.map(({ id, text }) => ( <FlipCard key={id} text={text} value={id} onFlip={handleFlip(id)} flipped={flipped[id]} disabled={hasFlipped} /> ))} </div> ) }; const FlipCard = ({ text, value, onFlip, flipped , disabled}) => { return ( <ReactCardFlip isFlipped={flipped} flipDirection="horizontal"> <FrontComponent onClick={onFlip} disabled={disabled} /> <BackComponent text={text} value={value} /> </ReactCardFlip> ) }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error