Reactjs Tic-tac-toe反应

我有两个部分。 家长：

导出默认类GameBoard.Component{
建造师（道具）{
超级（道具）；
这个州={
董事会模式：[
' ',' ',' ',
' ',' ',' ',
' ',' ',' '
],
转：“，
获胜者：空
}
}
handleClick（一）{
控制台日志（i）；
this.state.board[i]=this.state.turn
这是我的国家({
董事会：这个州董事会，
turn:this.state.turn=='./images/x.ico'？'./images/y.ico'：'./images/x.ico'
})
}
render（）{
返回(
{this.state.board.map（函数（值，i）{
返回此。handleClick（i）}/>
}.bind（this））}
)
}
}

儿童：

export default class Square extends React.Component{
  handleClick = e => {
      if ( typeof this.props.onTurnChange === 'function'){
          this.props.onChange();
      }
  };
  render(){
    return <div className='Square' onClick={this.handleTurnChange}>
      <img src={this.props.turn}></img>
    </div>
  }
}

导出默认类Square.Component{
handleClick=e=>{
if（this.props.onTurnChange==='function'的类型）{
this.props.onChange（）；
}
};
render（）{
返回
}
}

---

我对handleClick函数有问题。现在，当我点击每个方块时，每个方块的状态“转”（添加源图像）都会发生变化。如何使图像仅显示在已单击的正方形中

嗯，我认为问题是你不能做

这个.state.board[I]=这个.state.turn

如果不使用setState，则无法设置状态值

尝试复制电路板，对其进行更新，并使用新值设置状态

像这样的

const updatedBoard = this.state.board.slice();
updatedBoard[i] = this.state.turn;
this.setState({board: updatedBoard});

在您的示例中，我看不出板在哪里初始化？我只看到该州的董事会模式，如果它不改变，就不应该存在

希望它能帮助你

const updatedBoard = this.state.board.slice();
updatedBoard[i] = this.state.turn;
this.setState({board: updatedBoard});