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

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

Answer 2

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

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

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

Answer 4

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

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

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

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

How to handler onClick on child component in parent component

javascript

reactjs

react-component