受控组件
目前的 Square 组件称做“受控组件”。在这种情况下,Board 组件完全控制了 Square 组件。
改变数据的方式
第一种方式是直接修改变量的值。
第二种方式是使用新的一份数据替换旧数据。
撤销和恢复功能需求
不直接在数据上修改可以让我们追溯并复用游戏的历史记录,这就是方法。
替换Square类
function Square(props) {
return <button className = 'square'
onClick = { props.onClick } > { props.value } < /button>
}
修改juziClick()方法
juziClick(i) {
const juzi = this.state.juzi.slice();
juzi[i] = this.state.juziIsNext ? '大橘子' : '小橘子';
this.setState({
juzi,
juziIsNext: !this.state.juziIsNext
})
}
运行截图
修改Board组件中render()方法的status
const status = '当前玩家:' + (this.state.juziIsNext ? '大橘子' : '小橘子');
运行测试截图
请完成以上实操,加油