如何处理父组件中子组件的onClick答案

【问题标题】：How to handler onClick on child component in parent component如何处理父组件中子组件的onClick
【发布时间】：2019-04-26 22:34:28
【问题描述】：

我的 App 组件如下：

class App extends Component {
  clickHandler = () => {
    console.log('click');
  }
  render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person onClick={this.clickHandler}>Test2</Person>
      </div>

    );
  }
}

这是我的 Person 组件：

class Person extends Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

当我点击Test1 onClick 工作并在控制台上显示点击，但是当我点击Test2 onClick 不起作用。如何在父组件中处理 onClick？我不想将 onClick 传递给子组件。

【问题讨论】：

为什么不想将onClick 传递给子组件？这就是 React 的工作原理，尽管有不同的方法可以在子级中获取属性。

标签： javascript reactjs react-component

【解决方案1】：

class Person extends Component {
    render() {
        return (
            <div onClick={propes.onClick}>{props.children}</div>
        )
    }
}

【讨论】：

感谢您的贡献。请添加解释，突出显示解决 OP 问题的部分答案，以及为什么/如何。仅代码的答案通常不赞成 SO。添加细节可以增加长期价值，并帮助未来的访问者学习，因此他们可以将这些知识应用于他们自己的编码问题。此外，它提高了答案的质量，因此也是如此。更高质量的答案得到更多人的支持，因为更多的用户发现它们是可以参考的好资源。考虑编辑以提供更多信息，解释您选择此方法的原因，或突出显示 OP 需要更改的内容。

【解决方案2】：

这应该可行。你为什么不想这样写呢？您将它作为道具传递...

<div onClick={props.onClick}>Test</div>

【讨论】：

【解决方案3】：

这里是完整的解决方案... 结帐：https://codesandbox.io/s/vjp200rj3

修改了 App 中的渲染功能。

render() {
    return (
      <div className="App">
        <div onClick={this.clickHandler}>Test1</div>
        <Person clickHandler={this.clickHandler}>Test2</Person>
      </div>
    );
  }

修改了 Person 中的渲染功能：

  render() {
    return <div onClick={this.props.clickHandler}>{this.props.children}</div>;
  }

【讨论】：

【解决方案4】：

您需要将onClick 传递给Person 中的<div>。

onClick 不是在 React 中随处可用的特殊道具 - 唯一的内在道具是 key 和 children。其他一切都需要手动连接。

您的代码不起作用的原因是因为您将onClick 传递给Person，但传递给Person 组件，onClick 只是另一个道具。它自己什么都不做，直到你将它传递给一个理解处理点击事件意味着什么的组件（React 中的所有内置组件都这样做）。

【讨论】：