React--井字棋实战（8）

绑定一个key

const moves = history.map((step, move) => {
            const said = move ?
                '开始移动' + move : '开始游戏';
            return ( <
                li key={move}>
                <
                button onClick = {
                    () => this.eatJuzi(move)
                } > { said } <
                /button>        </li >
            )

Game 的构造函数 constructor 中向初始 state 中添加 stepNum: 0：

stepNum=0,

建立eatJuzi（)函数

 eatJuzi(step){
        this.setState({
            stepNum:step,
            juziIsNext:(step%2)===0,
        })
    }

修改juziClick（）函数

juziClick(i) {
        const history = this.state.history.slice(0, this.state.stepNum + 1);
        const current = history[history.length - 1];
        const juzi = current.juzi.slice();
        if (calculateWinner(juzi) || juzi[i]) {
            return
        }
        juzi[i] = this.state.juziIsNext ? '大橘子' : '小橘子';
        this.setState({
            history: history.concat([{
                juzi,
            }]),
            stepNum: history.length,
            juziIsNext: !this.state.juziIsNext
        })
    }

修改Game中的render（）

const history = this.state.history;
        const current = history[this.state.stepNum];
        const winner = calculateWinner(current.juzi);

其他不要动！！！

运行测试截图

完成！！！

谢谢