onClickは機能していません

Question

私は反応でティックタックのつま先ゲームを作成しようとしています。今、私は初めで、今はロジックを追加しようとしていません。私はboxコンポーネントにonclick関数を持たせようとしているので、console.logを使ってグリッドコンポーネントをクリックしたことを読むことができます。しかし、私のonclick関数でエラーを取得しています。また、私はそれを動作させるためにイベントを処理する必要があると思いますか？ここ は私のコードです：

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はonGreetメソッドを持っていません。あなたはBoxComponentがGridComponentのonGreetメソッドを呼び出したい場合は、その子に小道具としてその関数を渡す必要があります：

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

：

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> 
    ); 
} 

}

その後、子を形成する小道具を呼び出します