Reactでイベントハンドラをpropsとして渡します。

Question

私はそれを学ぶために反応でtic-tac-toeを実装しようとしています。しかし、私はイベントハンドラを渡すことについて真剣に混乱しています。
​​をSquareに、GameからBoardに引き渡そうとしています。 clickHandlerが機能しますが、iとjは未定義のままです。

class Game extends Component { 
     constructor() { 
     super(); 
     this.state = {squares: Array(3).fill(Array(3).fill(null))}; 
     } 
     render() { 
     return(
      <div className="game"> 
      <p> STATUS </p> 
      <Board squares={this.state.squares} handleClick={(i,j) => this.handleClick()}/> 
      </div> 
     ) 
     } 
     handleClick(i,j) { 
     console.log(i); 
     console.log(j); 
     } 
    } 

    class Board extends Component { 
     constructor() { 
     super(); 
     } 
     renderSquare(i,j) { 
     return <Square value={this.props.squares[i][j]} handleClick={ (i,j)=> this.props.handleClick(i,j) }/>; 
     } 
     render() { 
     const board = this.props.squares.map((row,i) =>row.map((j,k)=> this.renderSquare(i,k))); 
     return(
      <div className="board"> 
      {board} 
      </div> 
     ); 
     } 

    } 
    function Square(props) { 
     return(
     <button className="square" onClick={(i,j) => props.handleClick()}> 

     </button> 
    ); 
    } 

Answer 1

それはおそらくあなたがhandleClick

で

(i,j) => this.handleClick() 

で

<Board squares={this.state.squares} handleClick={(i,j) => this.handleClick()}/> 

ここも

<Square value={this.props.squares[i][j]} handleClick={ (i,j)=> this.props.handleClick(i,j) }/>; 

にiとjを渡していない、とは何の関係も反応していません handleClick = {（ i、j）=>

私は実際にclickイベントですが、引数iとjに名前を付けたので、あなたはiとjをシャドーイングしてSquareに渡しています。 handleClickの引数を省略すると、iとjは外側のスコープからキャプチャされます

<Square value={this.props.squares[i][j]} handleClick={() => this.props.handleClick(i,j) }/>;