React react

Recently, I have a need for a 9-grid lottery at work. At first, I didn’t have much idea, so I looked it up on the Internet and modified it myself. I hope to share with you.

Take a look at the renderings first

Create a variable that records the current pointer. Click the lottery and turn the pointer. When index is equal to the variable, make the current grid not consistent with the other grids.

In the figure above, the black array represents the order in which the prize elements are arranged, with 4 as the lucky draw button and the red number as the path in which the pointer rotates.

The code:

Start by defining a few variables

constructor (props) {
    super(props)

    this.state = {
      timer1: ' '// Timer 1 quickly rotates timer2:' ', // Timer 2 slowly rotate prizeIndex: 0, // rotate pointer stopIndex: null, // arrNum: [0, 1, 2, 5, 8, 7, 6, 3], // rotate order luckList: [], //falseDrawPrize = this.drawprize. Bind (this); drawPrize = this.drawprize. this.move = this.move.bind(this); this.lowSpeed = this.lowSpeed.bind(this); }Copy the code

Then write DOM rendering conditions based on the data

Since there are only 8 prizes returned in the background, some changes should be made to the data when retrieving the prize set, depending on the actual situation

res.data.dtls.splice(4, 0, {prizeName: "Lucky draw Button".type: 0});
Copy the code

This uses the Type attribute to distinguish the prize from the draw button

renderLi = () => {
    let {luckList} = this.state;
    return luckList.map((list, index) => {
        if(list.type ! = = 0) {return <div key={index} className={list.chose === 1 ? 'chose box_prize' : 'box_prize'}>
                    {list.type===1||list.type===2?
                        <img alt="" src={require('./css/redpocket.png')}/> :
                      list.type===3?
                      <img alt="" src={require('./css/integral.png')} / > :""
                    }
                    <div className="name">{list.prizeName}</div>
                  </div>
        } else {
            return <div key={index} className='box_prize click' onClick={this.drawPrize}></div>
        }

    })
  }
Copy the code

<div className="luck_turntable">
  {this.renderLi()}
</div>
Copy the code

Click the draw button to run the function drawPrize

// Click the lottery to perform fast rotation, and 2 seconds later to perform slow rotation asyncdrawPrize() {
    if(! this.state.isRolling) { this.setState({ prizeIndex: 0, stopIndex: null, isRolling:true,
            timer1: setInterval(this.move, 100)
        });
        setTimeout(() => {// After a circle and a half, reduce the speed clearInterval(this.state.timer1); this.lowSpeed() }, 2000) } }Copy the code

The slow rotation

lowSpeed() {// Slow // Clear the fast timer clearInterval(this.state.timer1); LotteryId (this.state.lotteryId, token). Then (res => {if(res.resultCode === '0') {
        letSwitch (res.data) {stopIndex = nullcase 4:
            stopIndex = 3
            break;
          case 7:
            stopIndex = 4
            break;
          case 6:
            stopIndex = 5
            break;
          case 5:
            stopIndex = 6
            break;
          case 3:
            stopIndex = 7
            break;
          case 0:
            stopIndex = 0
            break;
          case 1:
            stopIndex = 1
            break;
          case 2:
            stopIndex = 2
            break;
          default:
            stopIndex = null
            break} this.setState({stopIndex: stopIndex, timer2:setInterval(this.move, 300) }); }}Copy the code

Execute the move function

move() {/ / turninglet luckList = this.state.luckList
    letArrNum = this.state. ArrNum // chose=1 LuckList [arrNum[this.state.prizeindex]].chose = 1 LuckList [arrNum[this.state.prizeindex-1 <0?7: this.state.prizeindex-1]].chose = 0 // If prizeIndex is the same as the result, then the lottery is complete and all timers are clearedif(this.state.stopIndex ! == null && (this.state.prizeIndex === this.state.stopIndex)) { clearInterval(this.state.timer1); clearInterval(this.state.timer2);setTimeout(() => {
        this.setState({
            isRolling: false// Can continue to draw})}, 300); } // Otherwise, go ahead and do something about the zero bound positionelse {
      this.setState({
        prizeIndex: this.state.prizeIndex + 1 === 8 ? 0 : this.state.prizeIndex + 1
      })
    }
  }
Copy the code

I also need to restore the status on the second click, and I’m doing this under other conditions, depending on the actual situation.

Ok, a simple 9 grid draw is completed, please feel free to comment on better and richer schemes.