无法使用 ReactJs 中的按钮函数使 div 值为空

Question

我想将重置按钮添加到TIC TAC TOE游戏中。它应清除每个DIV元素中的价值。我提出的功能（请参见下文）清除了控制台中的值，但在UI中仍然保留X或O。我已经在构造函数函数中定义了一个状态，例如board： Array(9).fill('')。然后，我在单击事件目标属性的帮助下将值x或y带。这是我的示例代码：

class App extends Component {
  constructor(){
    super();
    this.state = {
      turn: 'X',
      gameEnded: false,
      board: Array(9).fill(''),
      totalMoves : 0
    }
  }
  clicked(event){
    if(this.state.gameEnded == true) return;
    if( this.state.board[event.target.dataset.square] === ''){
    this.state.board[event.target.dataset.square] = this.state.turn;
    event.target.innerText = this.state.turn;
    this.setState({
      turn: this.state.turn === 'X' ? 'O' :'X',
      totalMoves: this.state.totalMoves+1
    })
  }
  var result = this.checkWinner();}
  reset(){
      var board = this.state.board;
      for(let j=0;j < 9 ; j++){
         board[j] = null;
      }
      console.log(this.state.board);}
render() {
    return (
      <div id="board" onClick={(e)=>this.clicked(e)}>
            <div className= "square"  data-square= "0" ></div>
            <div className= "square"  data-square= "1"></div>
            <div className= "square"  data-square= "2"></div>
            <div className= "square"  data-square= "3"></div>
            <div className= "square"  data-square= "4"></div>
            <div className= "square"  data-square= "5"></div>
            <div className= "square"  data-square= "6"></div>
            <div className= "square"  data-square= "7"></div>
            <div className= "square"  data-square= "8"></div>
      </div>
      <div id="foot"><button className="button" onClick={()=>this.reset()}>Reset</button></div>
      </div>
    ); }}

Answer 1

我没有样式游戏，但我试图显示一种快速的方式，以便您可以学习如何解决问题。您需要将状态绑定到该状态，而不是为您设置内部文本。这是一个简单的工作示例。您可以自己编辑和自定义。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      turn: 'X',
      gameEnded: false,
      board: Array(9).fill(''),
      totalMoves: 0
    }
  }
  clicked(event) {
    if (this.state.gameEnded == true) return;
    if (this.state.board[event.target.dataset.square] === '') {
      this.state.board[event.target.dataset.square] = this.state.turn;
      this.setState({
        turn: this.state.turn === 'X' ? 'O' : 'X',
        totalMoves: this.state.totalMoves + 1
      })
    }
  }
  reset() {
    this.setState({
      board: Array(9).fill('')
    })
  }
  render() {
    return ( 
     <div id = "board"
      onClick = {
        (e) => this.clicked(e)
      } >
      <div className = "square" data-square = "0" >{this.state.board[0]}< /div>
      <div className = "square" data-square = "1" >{this.state.board[1]}< /div>
      <div className = "square" data-square = "2" >{this.state.board[2]}< /div>
      <div className = "square" data-square = "3" >{this.state.board[3]}< /div>
      <div className = "square" data-square = "4" >{this.state.board[4]}< /div>
      <div className = "square" data-square = "5" >{this.state.board[5]}< /div>
      <div className = "square" data-square = "6" >{this.state.board[6]}< /div>
      <div className = "square" data-square = "7" >{this.state.board[7]}< /div>
      <div className = "square" data-square = "8" >{this.state.board[8]}< /div>
      <div id = "foot" > < button className = "button"
      onClick = {
        () => this.reset()
      } > Reset < /button></div >
      </div>
    );
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);

.square {
border: 1px solid red;
width: 20px;
height: 20px;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />

Answer 2

您的重置功能应该是这样的：

  reset(){
      var newBoard = Array(9).fill('');
      this.setState({board:newBoard});
  }

@10101010-使用对现有状态内数组的引用不是一个好主意。这可能导致错误的行为。始终选择复制数据，然后选择SetState。

Answer 3

您需要将state.board数组渲染到DOM中。应用程序流应该为状态。Board->渲染 -> Divs Values