运行简易九宫格抽奖——React

2023-11-11 07:30:44

九宫格抽奖介绍

九宫格抽奖是一种流行的抽奖形式，它将九个格子排列成3x3的网格，每个格子都包含一个奖品或折扣信息。参与者通过点击格子来揭晓奖品，增添趣味性。九宫格抽奖不仅能够吸引参与者，还能为活动带来更多互动与参与感。

使用React构建九宫格抽奖系统

创建项目并安装依赖

npx create-react-app react-scratch-card
cd react-scratch-card

安装必要的依赖：

npm install styled-components

创建九宫格布局

import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 300px;
`;

const Cell = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
  cursor: pointer;
`;

创建奖品数据

const prizes = [
  '一等奖',
  '二等奖',
  '三等奖',
  '四等奖',
  '五等奖',
  '六等奖',
  '七等奖',
  '八等奖',
  '九等奖'
];

创建抽奖逻辑

import { useState } from 'react';

const ScratchCard = () => {
  const [scratchedCells, setScratchedCells] = useState([]);

  const scratchCell = (index) => {
    setScratchedCells([...scratchedCells, index]);
  };

  return (
    <Wrapper>
      {prizes.map((prize, index) => (
        <Cell key={index} onClick={() => scratchCell(index)}>
          {scratchedCells.includes(index) ? prize : null}
        </Cell>
      ))}
    </Wrapper>
  );
};

export default ScratchCard;