¿Lo siguiente que estoy tratando de hacer es posible con el paquete react-flip?
Básicamente mi anverso es una tarjeta con 2 botones. Cuando hago clic en la identificación de un botón, me gusta voltear hacia una parte trasera y si hago clic en el otro botón, quiero voltear hacia otra parte trasera diferente.
https://codesandbox.io/s/cool-sunset-pfjjln?file=/src/App.js
Aquí está mi código.
import CardContent from '@mui/material/CardContent' import { IconButton, Box } from '@mui/material' import TrainIcon from '@mui/icons-material/Train' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ReactCardFlip from 'react-card-flip' import CardDestination from './CardDestination' import CardBrowsePlan from './CardBrowsePlan' import React from 'react' function CardTrial() { const [isFlipped, setIsFlipped] = React.useState(false) const handleClick2 = () => { setIsFlipped(!isFlipped) } return ( <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> {/* front */} <Card> <CardContent> <IconButton onClick={handleClick2}> <TrainIcon sx={{ height: 25, width: 25 }} /> </IconButton> <IconButton onClick={handleClick2}> <ExpandMoreIcon sx={{ height: 25, width: 25 }} /> </IconButton> </CardContent> </Card> {/* back */} <Box> <CardDestination flip2={handleClick2} /> <CardBrowsePlan flip2={handleClick2} /> </Box> </ReactCardFlip> ) } export default CardTrialEn este momento tengo a mis hijos en una caja y obviamente ambos giran cuando hago clic en cualquiera de los 2 botones. (también pasando accesorios para que puedan dar la vuelta) ¿Cómo hago esto? ¡Gracias!
Puede hacer un estado más para decirle a React qué carta debe voltearse.
function CardTrial() { const [isFlipped, setIsFlipped] = React.useState(false) const [isDestinationCard, setIsDestinationCard] = React.useState(false) const handleClick1 = () => { setIsDestinationCard(true) setIsFlipped(!isFlipped) } const handleClick2 = () => { setIsDestinationCard(false) setIsFlipped(!isFlipped) } return ( <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> {/* front */} <Card> <CardContent> <IconButton onClick={handleClick1}> {/* this button will open CardDestination */} <TrainIcon sx={{ height: 25, width: 25 }} /> </IconButton> <IconButton onClick={handleClick2}> {/* this button will open CardBrowsePlan */} <ExpandMoreIcon sx={{ height: 25, width: 25 }} /> </IconButton> </CardContent> </Card> {/* back */} <Box> {isDestinationCard ? <CardDestination flip2={handleClick1} /> : <CardBrowsePlan flip2={handleClick2} />} </Box> </ReactCardFlip> ) } export default CardTrialO bien, puede hacer que su estado sea una cadena que le indicará qué tarjeta abrir o se cerrará con un valor vacío
function CardTrial() { const [CardTrigger, setCardTrigger] = React.useState("") const handleClick = card => { setCardTrigger(card) } return ( <ReactCardFlip isFlipped={!!CardTrigger.length} flipDirection="horizontal"> {/* front */} <Card> <CardContent> <IconButton onClick={() => handleClick("destination")}> {/* this button will open CardDestination */} <TrainIcon sx={{ height: 25, width: 25 }} /> </IconButton> <IconButton onClick={() => handleClick("browsePlan")}> {/* this button will open CardBrowsePlan */} <ExpandMoreIcon sx={{ height: 25, width: 25 }} /> </IconButton> </CardContent> </Card> {/* back */} <Box> {CardTrigger === "destination" && <CardDestination flip2={() => handleClick("")} />} {CardTrigger === "browsePlan" && <CardBrowsePlan flip2={() => handleClick("")} />} </Box> </ReactCardFlip> ) } export default CardTrial