handleClick(i) { if (this.state.finished) { return; } const history = this.state.history.slice(0, this.state.stepNumber + 1); const squares = [...history[history.length - 1].squares]; if (squares[i]) { return; } const winner = calculateWinner(squares); if (winner) { this.setState({finished: true}); return; } squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ history: [...history, {squares}], stepNumber: history.length, xIsNext: !this.state.xIsNext }); }
render() { const history = [...this.state.history]; const squares = [...history[this.state.stepNumber].squares]; const winner = calculateWinner(squares); const status = (winner) ? 'Winner: ' + winner : 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); 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> </li> ); }); return ( <div className="game"> <Board squares={squares} onClick={(i) => this.handleClick(i)} /> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); }
render() { const history = this.state.history; const squares = history[this.state.currentStep].squares; const winner = calculateWinner(squares); let status; <div id="game"> <Board squares = {this.state.history[this.state.currentStep].squares} handleSquareClick = { i => this.handleSquareClick(i) } />
render() { const history = this.state.history; const squares = history[this.state.currentStep].squares; const winner = calculateWinner(squares); let status; <div id="game"> <Board squares = {this.state.history[this.state.currentStep].squares} handleSquareClick = { i => this.handleSquareClick(i) } />