条件渲染反应-基于按钮或其他1正面2背面的卡翻转子
条件渲染反应-基于按钮或其他1正面2背面的卡翻转子
提问于 2022-07-31 18:44:51
下面的im试着用反作用翻转包做吗？
基本上，我的正面是一张有两个按钮的卡片。当我点击一个按钮id，喜欢翻转到一个背面，如果我点击另一个按钮，我想在另一个不同的背面翻转。
https://codesandbox.io/s/cool-sunset-pfjjln?file=/src/App.js
这是我的密码。
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 CardTrial现在我把我的孩子放在一个盒子里，很明显，当我点击这两个按钮中的任何一个时，他们都会转过来。(也是通过道具让他们回头)我该怎么做呢？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-31 19:47:45
你可以再做一次状态来判断哪一张牌必须翻转。
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 CardTrial或，您可以将状态设置为字符串，它将告诉您要打开哪一张卡，或者以空值关闭。
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73186035
复制相关文章
相似问题
腾讯云开发者
