Question

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

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

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

Answer 1

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

Answer 2

您可以使用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 个答案: