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>
    );
  }

已修改Person中的渲染功能：

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

Answer 3

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

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

您的代码不起作用的原因是因为您将onClick传递给Person，但是传递给Person组件，onClick只是另一个道具。直到您将其传递给一个了解处理click事件的含义的组件（React中的所有内置组件都将执行此操作），它本身不会做任何事情。

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

4 个答案: