onClick funktioniert nicht

Question

Ich versuche, ein Tic Tac Toe Spiel in Reaktion zu erstellen. Gerade jetzt bin ich am Anfang und ich versuche gerade nicht, Logik hinzuzufügen. Ich versuche eine Onclick-Funktion für meine Box-Komponente zu haben, damit sie lesen kann, dass ich mit console.log auf die Grid-Komponente geklickt habe. aber ich bekomme Fehler in meiner onclick Funktion. Glaubst du auch, ich brauche Handle-Event, damit es funktioniert? hier ist mein Code:

export default App; 

class ApplicationComponent extends React.Component { 

    clicked(event){ 

     console.log(event.target) 
    } 

    render() { 
     return (
      <div>Application Component</div> 
     ); 
    } 
    resetBoard(){ 
     console.log("what up world"); 
    } 
    checkingWon(){ 
     console.log("what up world 2") 
    } 
} 
class GridComponent extends React.Component { 
onGreet(){ 
    console.log("grid") 
} 
    render() { 
     return (
      <div className="grid"> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
       <BoxComponent/> 
      </div> 
     ); 
    } 
} 

class BoxComponent extends React.Component { 

    render() { 
     return (
      <div className="box" onClick={(BoxComponent)=> 
       this.click.bind(this.onGreet)}> 

      </div> 
     ) 
    } 
} 

Answer 1

BoxComponent keine onGreet Methode hat. Wenn Sie BoxComponent wollen GridComponent ‚s onGreet Methode aufzurufen, müssen Sie seine Kinder diese Funktion als Stütze weitergeben müssen:

class GridComponent extends React.Component { 
    onGreet(){ 
    console.log("grid") 
    } 
    render() { 
    return (
     <div className="grid"> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     <BoxComponent onClick={this.onGreet}/> 
     </div> 
    ); 
} 

}

Dann rufen, dass prop das Kind bilden:

class BoxComponent extends React.Component { 
    render() { 
    const {onClick} = this.props; 
    return (
     <div className="box" onClick={onClick}> 
     </div> 
    ); 
    } 
}