Question

我尝试使用Reactstrap中的弹出式窗口。

这是我的代码段：

constructor(props) {
  super(props);
  this.state = {
    popoverOpen: false
  };
}

toggle = () => {
  this.setState({popoverOpen: !this.state.popoverOpen})
};

<div>
  <Button id="Popover1" type="button">
    Launch Popover
  </Button>
  <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
    <PopoverHeader>Popover Title</PopoverHeader>
    <PopoverBody>Hello there :)</PopoverBody>
  </Popover>
</div>

上面的代码已经有效。

但是，现在我想将按钮拆分到另一个组件上。

那么，任何示例如何做到..？

是否可以从另一个组件获取按钮ID？或者，我应该从另一个组件setState吗？如果是这样，请举一个例子或资料来学习。

Answer 1

我认为可以使用React state lifting解决此任务。

想法是根据需要创建Button组件并将其传递给containers: - image: tsuyoshiushio/queuefunction-azurefunc imagePullPolicy: Always name: queuefunction-deployment env: - name: AzureWebJobsStorage value: YOUR_STORAGE_ACCOUNT_CONNECTION_STRING_HERE ports: - containerPort: 80 protocol: TCP函数，因此Button组件将在每次调用时调用它。另外，您可以传递toggle，以便Button组件可以知道弹出框当前是否打开。您的min组件将具有相同的状态，但您的Button组件将具有props的父级状态。

这里是示例（此代码未经测试！仅用作提示！）

this.state.popoverOpen

如何从另一个组件获取按钮ID？

1 个答案: