如何知道另一个子组件中一个子组件的事件答案

【问题标题】：how to know events of one child component in another child Component如何知道另一个子组件中一个子组件的事件
【发布时间】：2019-01-05 17:46:07
【问题描述】：

class Dashboard extends Component {
  render() {
    return (
      <div className="row">
        <SidePanel />
        <DashboardContentPanel />
      </div>
    );
  }
}

我的问题是：在sidePanel中，有6个按钮，根据点击的按钮，我想改变DashboardContentPanel的内容

我是 ReactJS 的新手！帮我。只是一个逻辑！

【问题讨论】：

查看stackoverflow.com/questions/36143767/…

标签： reactjs

【解决方案1】：

您可以使用ref 访问整个组件功能

假设您的DashboardContentPanel 组件有一个名为myFunctionButtonOne 的函数，并且您需要在SidePanel 组件中单击按钮时触发此函数，因此Dashboard 组件将成为(SidePanel, DashboardContentPanel) 组件

class Dashboard extends Component {
  render() {
    return (
      <div className="row">
        <SidePanel handleButtonOne={this.panel.myFunctionButtonOne} />
        <DashboardContentPanel ref={(panel)=> this.panel = panel} />
      </div>
    );
  }
}

当我们将 handleButtonOne 作为道具传递时，我们可以像这样使用它

<button onClick={this.props.handleButtonOne}>Click me</button>

【讨论】：

【解决方案2】：

您需要做的是在 Dashboard 类中定义一个函数，并将该函数作为道具传递给 Sidepanel 组件。现在，当单击按钮时，可以触发 Dashboard 类中定义的函数。您可以相应地更改状态并将其作为道具传递给 DashboardContentPanel。希望能解决这个问题:)

【讨论】：