Übergeben von Ereignishandlern als Requisiten in React.

Question

Ich versuche Tic-Tac-Toe in Reaktion zu implementieren, um es zu lernen. Ich bin jedoch sehr verwirrt über die Übergabe von Event-Handlern.
Ich versuche, handleClick zu Square von Game bis Board zu übergeben. Die clickHandler funktioniert, aber i und j bleiben undefiniert.

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

es hat wohl nichts mit reagieren zu tun, sind Sie nicht vorbei i und j

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

in

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

auch

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

hier handle in handleClick = {(i, j) =>

Ich bin eigentlich click-Ereignis, aber weil Sie Argumente i und j benannten Sie shadowing ich und j übergeben Square. Wenn Sie in handleClick keine Argumente angeben, werden i und j aus dem äußeren Bereich übernommen

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