时间戳

首页 > 解决方案 > 如何从另一个组件获取按钮 ID？

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

问题描述

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

标签： javascriptreactjsreactstrap

解决方案

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

这个想法是根据需要创建 Button 组件并将其传递给它的toggle函数，因此 Button 组件将在每次调用时调用它。您也可以通过this.state.popoverOpen，以便 Button 组件知道弹出框当前是否打开。您的 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>
    }
}

推荐阅读