Question

我的SquareClicker组件呈现了一个SquareGrid，它依次包含可点击的Square：

class SquareClicker extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      grid: Array.from(Array(5).keys()).map(
        i => Array.from(Array(5).keys()).map(
          j => <Square key={((i*5)+j).toString()} onClick={this.handleClick}/>
        )
      )  
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    console.log("A square has been clicked.");
  }

  render() {
    return (
      <div className="square-clicker">
        <SquareGrid grid={this.state.grid}/>
      </div>
      );
  };
}

class Square extends React.Component {
  render() {
    return (
      <div className={"square"} />
    );
  };
}

当我单击正方形时，没有任何内容记录到控制台。

这个question很相似-但正如您所看到的，我已经将handleClick函数与this.handleClick = this.handleClick.bind(this);绑定到了组件上下文。

如何使我的正方形可点击？

Answer 1

最初，我误读了您的信息，对不起（我将<Square>和<SquareGrid>弄混了），请尝试设置您的<Square>组件...

j => <Square key={((i*5)+j).toString()} click={this.handleClick}/>

然后在您的<Square>组件中，将render()设置为...

render() {
    return (
        <div
            className={"square"}
            onClick={(e) => this.props.click(e)}
        />
    );
}

Answer 2

您必须将点击事件传递给SquareGrid

// In SquareClicker

 <SquareGrid grid={this.state.grid} click={this.handleClick} />

在SquareGrid组件内，您将使用click道具，如下所示：


class SquareGrid extends React.Component {
 ...

return (
// ...you code
 <Square click={this.props.click} />
)

}

然后在Square组件内部再次传递此道具

class Square extends React.Component {

  render() {
    return (
      <div className={"square"} onClick={this.props.click}/>
    );
  };
}

将React点击处理程序传递给子组件

2 个答案: