Tic tac toe React

Question

我有两个组成部分。 父：

p2

子：

    export default class GameBoard extends React.Component{
      constructor(props){
        super(props);
        this.state={
          boardPattern:[
            ' ',' ',' ',
            ' ',' ',' ',
            ' ',' ',' '
          ],
          turn: "",
          winner: null
        }
      }

        handleClick(i){
        console.log(i);
        this.state.board[i]=this.state.turn
        this.setState({
          board:this.state.board,
          turn: this.state.turn==='./images/x.ico'?'./images/y.ico':'./images/x.ico'
        })
  }
  render() {
    return (
      <div>

          {this.state.board.map(function(value, i){
            return <Square key={i} turn={this.state.turn} onChange={()=>this.handleClick(i)}/>
          }.bind(this))}
      </div>
          )
    }
  }

我遇到了handleClick函数的问题。现在当我点击每个广场时，状态转向＆＃39; （添加源图像）在每个方格中都会更改。如何仅在我点击的Square中显示图像？

Answer 1

嗯，我认为问题在于你无法this.state.board[i]=this.state.turn 如果不使用setState，则无法设置状态值。

尝试制作电路板副本，更新电路板并使用新值设置状态

像这样的东西

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

在您的示例中，我不知道电路板的初始化位置？我只看到该州的董事会模式，如果它不会发生变化，那就不应该存在。

希望它可以帮到你！