如何从其他组件获取按钮ID？

Question

我尝试使用来自Reactstrap的popovers。

这是我的代码的片段：

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组件并传递给ittoggle函数，因此Button组件将在每次调用时调用它。你也可以通过this.state.popoverOpen，所以Button组件将知道popover当前是否打开。你的min组件将具有相同的状态，但你的Button组件将父级状态作为props。

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

// 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>
    }
}