Передача обработчиков событий в качестве реквизита в Реагировании.

Question

Я пытаюсь реализовать tic-tac-toe, чтобы реагировать на его изучение. Тем не менее, я серьезно запутался в передаче обработчиков событий.
Я пытаюсь передать handleClick в 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

это, вероятно, не имеет ничего общего с среагировать, вы не проходя I и J в 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) }/>; 

в handleClick = {(i, j) =>

i на самом деле клик-событие, но поскольку вы назвали аргументы i и j, вы затеняете i и j, переданные на квадрат. если вы опустите аргументы в handleClick, i и j будут захвачены из внешнего диапазона

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