Tic Tac Toe 1つの箱にXを描く

Question

Reactを使ってTic Tac Toeのゲームに少し問題があります。だからボードをクリックするたびに、私はそれをしたいXレンダリングを持っています。私はそれが欲しいだけです。すべてのものではなく一つの四角で描写する。私は、この特定の状況のた​​めにSETSTATEを使用すべきか、ここでX

の中に呼び出すための彼らの別の方法は、私のコードです：

class App extends Component { 
    render() { 
     return (<div> 
      <h1>TIC TAC TOE</h1> 
      <ApplicationComponent/> 
      <GridComponent/> 
     </div>) 
    } 
} 
class ApplicationComponent extends React.Component { 

    render() { 
     return (<div>Application Component</div>); 
    } 
    resetBoard() { 
     console.log("resetBoard"); 
    } 
    checkingWon() { 
     console.log("checkingWon") 
    } 
} 
class GridComponent extends React.Component { 

    constructor() { 
     super(); 
     this.state = { 
      turn: '', 
     }; 
    } 
    setMark(i) { 
     this.setState({turn: "X" 
     }) 
    } 

    render() { 

     // empty object 
     let grid = []; 
     // set length for loop 
     let length = 9; 
     // loop through array and push in objects 


     for(let i = 0; i < length; i++) { 
      grid.push(<BoxComponent onUpdateNeeded={this.setMark.bind(this, i)} name={this.state.turn}/>); 

     } 

     // render 
     return (

      <div className="grid"> 


       {grid.map(function(component, index){ 
        return <div key={index}> {component} </div>; 
       })} 
      </div> 
     ); 
    } 
} 

class BoxComponent extends React.Component { 


    Clicked(event) { 
     this.props.onUpdateNeeded(); 
     console.log(this); 

    } 

    render() { 
     return (

      <div className="box" onClick={this.Clicked.bind(this)}> 
       {this.props.name} 

      </div> 
     ); 
    } 
} 

export default App; 

Answer 1

@fungusanthraxはコメントで言ったように、あなたがグリッドを保存する必要があると思いますstate。 基本的には、クリックすると、現在のプレイヤー/ターン（ここではX/O）にインデックスが表示されるボックス（配列など）を持つリストがあります。

このexampleをご覧ください。