基于React.js如何实现兔兔牌九宫格翻牌抽奖组件(react.js,开发技术)

基础页面结构

importReact,{useEffect,useState}from"react"import'./index.css'constFlopLuckyDraw9=()=>{return(<><divclassName="title">可抽奖<label>{count}</label>次</div><divclassName="box">{list.map((item)=>{return(<divclassName="item"key={item.id}><divclassName={`style1`}>抽奖</div><divclassName={`style2`}>{item.name}</div></div>)})}</div></>)}exportdefaultFlopLuckyDraw9

初始化数据

importReact,{useEffect,useState}from"react"import'./index.css'constdata=[{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:'顶配笔记本'}]constFlopLuckyDraw9=()=>{const[count,setCount]=useState(3)const[list,setList]=useState([])useEffect(()=>{setList(data.map((i)=>{return{...i,showName:false,showResult:false}}))},[])return(<></>)}exportdefaultFlopLuckyDraw9

翻转逻辑

点击 item 时，将 showName 变为 true，改变类名，实现翻转效果。

constFlopLuckyDraw9=()=>{consthandleClick=(item)=>{setList(list.map((i)=>{if(i.id===item.id){return{...i,showName:true,}}else{returni}}))}return(<><divclassName="box">{list.map((item)=>{return(<divclassName="item"onClick={()=>handleClick(item)}key={item.id}><divclassName={`style1${item.showName?'hide':null}`}>抽奖</div><divclassName={`style2${item.showName?'show':null}`}>{item.name}</div></div>)})}</div></>)}exportdefaultFlopLuckyDraw9

count 为 0

当 count 为 0 时，将所有的牌全部都翻转出来，同时添加未选中的类名。

constFlopLuckyDraw9=()=>{const[count,setCount]=useState(3)useEffect(()=>{setTimeout(()=>{//监听countif(count===0){setList(list.map((i)=>{if(!i.showName){return{...i,showName:true,showResult:true}}else{return{...i,showName:true,}}}))}},1000);},[count])consthandleClick=(item)=>{if(count===0){return;}//....setCount(count=>count-1)}return(<><divclassName="title">可抽奖<label>{count}</label>次</div><divclassName="box">{list.map((item)=>{return(<div><divclassName={`style2${item.showName?'show':null}${item.showResult?'show-result':null}`}>{item.name}</div></div>)})}</div></>)}exportdefaultFlopLuckyDraw9

100% 中奖

100% 中奖？代码是自己的，改吧改吧就可以了。

constdata=[{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)constFlopLuckyDraw9=()=>{const[winAPrize,setWinAPrize]=useState([])consthandleClick=(item)=>{//...constwinAPrizeItem=winAPrize.pop()setList(list.map((i)=>{if(i.id===item.id){return{...i,showName:true,name:winAPrizeItem.name}}else{returni}}))//...}useEffect(()=>{setWinAPrize(data.filter(v=>v.is))},[])return(<></>)}exportdefaultFlopLuckyDraw9

效果图