基于React.js实现兔兔牌九宫格翻牌抽奖组件

更新时间：2023年01月12日 17:11:49 作者：鹿鱼

这篇文章主要为大家详细介绍了如何基于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九宫格翻牌抽奖的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

TS装饰器bindThis优雅实现React类组件中this绑定
这篇文章主要为大家介绍了TS装饰器bindThis优雅实现React类组件中this绑定，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React进行路由跳转的方法汇总
在 React 中进行路由跳转有多种方法,具体取决于你使用的路由库和版本,以下是常见的路由跳转方法汇总,主要基于 react-router-dom 库,文中并通过代码示例介绍的非常详细,需要的朋友可以参考下
2025-02-02
react递归组件实现树的示例详解
在一些react项目中,常常有一些需要目录树这种结构,这篇文章主要为大家介绍了如何使用递归组件实现树,感兴趣的小伙伴可以了解下
2024-10-10
react-router-dom入门使用教程(前端路由原理)
这篇文章主要介绍了react-router-dom入门使用教程,主要包括react路由相关理解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
详解React中常见的三种路由处理方式选择
这篇文章主要为大家详细介绍了React中常见的三种路由处理方式该如何选择,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
React Context原理深入理解源码示例分析
这篇文章主要为大家介绍了React Context原理深入理解源码示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
react实现Modal弹窗效果
这篇文章主要为大家详细介绍了react实现Modal弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
React Hooks 实现的中文输入组件
这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
ReactNative错误采集原理在Android中实现详解
这篇文章主要为大家介绍了ReactNative错误采集原理在Android中实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
十分钟带你快速了解React16新特性
这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11