React 从零开始学习（七）—— 交替落子

现在，准备给棋盘操作添加对手棋子。

默认 “X” 为先手棋，设置 Board 组件的构造函数中的初始 state 中的 isNext 为 true：

  constructor(props) {
    super(props)
    this.state = {
      squares: Array(9).fill(null),
      isNext: true
    }
  }

棋子每点击一次时，都触发 handleClick 函数通过 setState 来设置 isNext 的值，并且保存游戏的状态。

handleClick (i) {
    const squares = this.state.squares.slice()
    squares[i] = this.state.isNext ? 'X' : 'O'
    this.setState(
      {
        squares: squares,
        isNext: !this.state.isNext
      }
    )
  }

arr.slice([begin[, end]])

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

然后，在 render 方法中根据 isNext 的值判断下一步是轮到哪个玩家：

const status = 'Next player:' + (this.state.isNext ? 'X' : 'O')

点击格子，会交替展示 X 或者 O ，效果如下：

现在，点击格子，页面会展示下一步的角色：

完整代码如下：

import React, { Component } from 'react'
import Square from './Square'
class Board extends Component {
  constructor(props) {
    super(props)
    this.state = {
      squares: Array(9).fill(null),
      isNext: true
    }
  }
  handleClick (i) {
    const squares = this.state.squares.slice()
    squares[i] = this.state.isNext ? 'X' : 'O'
    this.setState(
      {
        squares: squares,
        isNext: !this.state.isNext
      }
    )
  }
  renderSquare (i) {
    return <Square
      value={this.state.squares[i]}
      onClick={() => this.handleClick(i)} />
  }
  render () {
    const status = 'Next player:' + (this.state.isNext ? 'X' : 'O')
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    )
  }
}
export default Board