绑定一个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);
其他不要动!!!
运行测试截图
完成!!!
谢谢