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

【问题标题】：Passing a React click handler to child components将 React 点击处理程序传递给子组件
【发布时间】：2020-06-20 00:44:49
【问题描述】：

我的SquareClicker 组件呈现一个SquareGrid，它又包含可点击的Squares：

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); 的组件上下文。

如何使我的方块可点击？

【问题讨论】：

你能提供你Square 类的代码吗？
@Frosty619 当然，我已经更新了我的代码。
在组件状态中存储反应元素是一种反模式。
@trixn 谢谢。如何避免这种反模式？
@alex，您没有在 Square 组件中附加 clickHandler！

标签： reactjs

【解决方案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)}
        />
    );
}

【讨论】：

this.props.click 是什么？
@alex：这些是子类的道具。如果您的class Square extends React.Component 中有一个构造函数，您将可以访问它。在组件中有构造函数是很典型的。您需要能够将props（属性）传递给子组件。
啊，好吧，我错过了click={this.handleClick}。谢谢，我试试这个。
这行得通，谢谢。你知道我如何将参数传递给handleClick 函数吗？例如，我单击的正方形的坐标（例如给定this.props.rowNumber 和this.props.colNumber）？
嗨，亚历克斯：感谢您的接受！是的，我确实知道如何传递这样的参数 - 将上面更改为onClick={(e, parm1) => this.props.click(e, parm1)}，然后将handleClick(e) 更改为handleClick(e, parm1)，实际上我忘记在上面的答案中包含(e) args，所以，添加刚才那个！感谢您的关注，希望对您有所帮助。

【解决方案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}/>
    );
  };
}

【讨论】：