React三子棋教程后续练习

1. 在游戏历史记录列表显示每一步棋的坐标,格式为 (列号, 行号)。

game.state.history中不仅需要记录棋盘,还需要记录此步落子的坐标

class Game extends React.Component {
   
  // 修改Game构造函数中的history
  constructor(props) {
   
    super(props)
    this.state = {
   
      history: [{
   
        squares: Array(9).fill(null),
        stepIndex: null, // 增加这一行
      }],
      xIsNext: true,
      stepNumber: 0,
    }
  }
  // 点击的时候记录此步落子的坐标
  handleClick(i) {
   
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
   
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
   
      history: history.concat([{
   
        squares: squares,
        stepIndex: i, // 增加这一行
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    })
  }
}

之后写一个函数式组件,用来展示棋子的坐标

function StepSpan(props){
   
  const stepIndex = props.stepIndex
  if(stepIndex !== null){
   
    return (
      <span>row:{
   Math.floor(stepIndex/3) + 1}|col:{
   stepIndex % 3 + 1}</span>
    );
  }
  else{
   
    return null
  }
}

再修改Game的render方法中的moves

    const moves = history.map((step, move) => {
   
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={
   move}>
          <button onClick={
   () => this.jumpTo(move)}>{
   desc}</button>
          <StepSpan stepIndex={
   step.stepIndex} ></StepSpan> // 增加这行
      
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值