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

时间:2018-07-29 05:55:23

标签: reactjs

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

我的问题是:在sidePanel中,有6个按钮,根据单击的按钮,我想更改DashboardContentPanel的内容

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

让我们考虑您的DashboardContentPanel组件具有一个名为myFunctionButtonOne的功能,并且当您在SidePanel组件中单击按钮时需要触发此功能,因此Dashboard组件将是(SidePanelDashboardContentPanel)个组件之间的中介者

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>