javascript - 如何处理父组件中子组件的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>
        )
    }
}

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

标签： javascriptreactjsreact-component

Answer 1

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

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