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

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..？ 或者，我应该从另一个组件设置状态..？ 如果是这样，请举一个例子或来源来学习。

Answer 1

我认为这个任务可以通过React 状态提升来解决。

这个想法是根据需要创建 Button 组件并将其传递给它的toggle功能，因此 Button 组件将在每次调用时调用它。 您也可以传递this.state.popoverOpen以便 Button 组件知道当前是否打开了this.state.popoverOpen 。 您的 min 组件将具有相同的状态，但您的 Button 组件将具有父组件的状态作为道具。

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

// ButtonComponent.js
// import React and other nesessary things
export default class ButtonComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render () {
        return <Button id={this.porps.ButtonID} type="button" onClick={this.props.toggle}>
            Launch Popover
        </Button>
    }
}

// mainComponent.js
import ButtonComponent from './ButtonComponent.js'

export default MainComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            popoverOpen: false
        };
    }

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

    render () {
        return <div>
            <ButtonComponent toggle={this.toggle.bind(this)} ButtonID={"Popover1"}/>
            <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
                <PopoverHeader>Popover Title</PopoverHeader>
                <PopoverBody>Hello there :)</PopoverBody>
            </Popover>
        </div>
    }
}