这篇文章主要介绍了基于React.js如何实现兔兔牌九宫格翻牌抽奖组件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于React.js如何实现兔兔牌九宫格翻牌抽奖组件文章都会有所收获，下面我们一起来看看吧。
基础页面结构
import React, { useEffect, useState } from "react"
import './index.css'
const FlopLuckyDraw9 = () => {
return (
<>
<div className="title">
可抽奖
<label >{count}</label>
次
</div>
<div className="box">
{
list.map((item) => {
return (
<div className="item" key={item.id}>
<div className={`style1`}>抽奖</div>
<div className={`style2`}>{item.name}</div>
</div>
)
})
}
</div>
</>
)
}
export default FlopLuckyDraw9
初始化数据
import React, { useEffect, useState } from "react"
import './index.css'
const data = [
{ id: 1, name: '1元优惠券' },
{ id: 2, name: '10元优惠券', },
{ id: 3, name: '谢谢惠顾' },
{ id: 4, name: '豪华电动车' },
{ id: 5, name: '1w购物券' },
{ id: 6, name: '5w购物券' },
{ id: 7, name: '豪华轿车' },
{ id: 8, name: '房子一套' },
{ id: 9, name: '顶配笔记本' }
]
const FlopLuckyDraw9 = () => {
const [count, setCount] = useState(3)
const [list, setList] = useState([])
useEffect(() => {
setList(data.map((i) => {
return {
...i,
showName: false,
showResult: false
}
}))
}, [])
return (
<></>
)
}
export default FlopLuckyDraw9
翻转逻辑
点击 item 时，将 showName 变为 true，改变类名，实现翻转效果。
const FlopLuckyDraw9 = () => {
const handleClick = (item) => {
setList(list.map((i) => {
if (i.id === item.id) {
return {
...i,
showName: true,
}
} else {
return i
}
}))
}
return (
<>
<div className="box">
{
list.map((item) => {
return (
<div className="item" onClick={() => handleClick(item)} key={item.id}>
<div className={`style1 ${item.showName ? 'hide' : null}`}>抽奖</div>
<div className={`style2 ${item.showName ? 'show' : null}`}>{item.name}</div>
</div>
)
})
}
</div>
</>
)
}
export default FlopLuckyDraw9
count 为 0
当 count 为 0 时，将所有的牌全部都翻转出来，同时添加未选中的类名。
const FlopLuckyDraw9 = () => {
const [count, setCount] = useState(3)
useEffect(() => {
setTimeout(() => {
// 监听 count
if (count === 0) {
setList(list.map((i) => {
if (!i.showName) {
return {
...i,
showName: true,
showResult: true
}
} else {
return {
...i,
showName: true,
}
}
}))
}
}, 1000);
}, [count])
const handleClick = (item) => {
if (count === 0) {
return;
}
// ....
setCount(count => count - 1)
}
return (
<>
<div className="title">
可抽奖
<label >{count}</label>
次
</div>
<div className="box">
{
list.map((item) => {
return (
<div>
<div className={`style2 ${item.showName ? 'show' : null} ${item.showResult ? 'show-result' : null}`}>{item.name}</div>
</div>
)
})
}
</div>
</>
)
}
export default FlopLuckyDraw9
100% 中奖
100% 中奖？代码是自己的，改吧改吧就可以了。
const data = [
{ id: 1, name: '1元优惠券', is: true },
{ id: 2, name: '10元优惠券', },
{ id: 3, name: '谢谢惠顾', is: true },
{ id: 4, name: '豪华电动车' },
{ id: 5, name: '1w购物券' },
{ id: 6, name: '5w购物券' },
{ id: 7, name: '豪华轿车' },
{ id: 8, name: '房子一套', is: true },
{ id: 9, name: '顶配笔记本' }
].sort(v => Math.random() - 0.5)
const FlopLuckyDraw9 = () => {
const [winAPrize, setWinAPrize] = useState([])
const handleClick = (item) => {
// ...
const winAPrizeItem = winAPrize.pop()
setList(list.map((i) => {
if (i.id === item.id) {
return {
...i,
showName: true,
name: winAPrizeItem.name
}
} else {
return i
}
}))
// ...
}
useEffect(() => {
setWinAPrize(data.filter(v => v.is))
}, [])
return (
<></>
)
}
export default FlopLuckyDraw9
效果图
关于“基于React.js如何实现兔兔牌九宫格翻牌抽奖组件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“基于React.js如何实现兔兔牌九宫格翻牌抽奖组件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注本站行业资讯频道。
