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

Question

我的 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 传递给子组件。

Answer 1

这应该有效。 你为什么不想这样写呢？ 你把它作为道具传递...

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

Answer 2

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

修改了 App 中的渲染功能。

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

个人修改渲染功能：

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

Answer 3

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

Answer 4

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

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

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