onClick 不起作用

Question

我正在尝试创建一个井字游戏来响应。现在我还处于起步阶段，我现在不想为其添加逻辑。我正在尝试在我的盒子组件上设置一个 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 方法，你需要将该函数作为prop 传递给它的孩子：

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

}

然后，将该道具称为孩子：

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