当前位置: 首页 > 面试题库 >

如何以编程方式打开/关闭react-bootstrap模式?

莫宝
2023-03-14
问题内容

我需要像这样打开/关闭模态

$(element).modal(’show’)

怎么做?


问题答案:

您正在寻找的是自定义模式触发器,该触发器使用OverlayMixin并允许您自己管理模式状态。您可以控制是否使用模态this.setState({isModalOpen: true})来实现与以下示例中所要求的效果相同的效果。以下代码来自react-bootstrap网站(http://react-
bootstrap.github.io/components.html#modals
):

const CustomModalTrigger = React.createClass({
  mixins: [OverlayMixin],

  getInitialState() {
    return {
      isModalOpen: false
    };
  },

  handleToggle() {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    });
  },

  render() {
    return (
      <Button onClick={this.handleToggle} bsStyle='primary'>Launch</Button>
    );
  },

  // This is called by the `OverlayMixin` when this component
  // is mounted or updated and the return value is appended to the body.
  renderOverlay() {
    if (!this.state.isModalOpen) {
      return <span/>;
    }

    return (
      <Modal bsStyle='primary' title="Modal heading" onRequestHide={this.handleToggle}>
        <div className='modal-body'>
          This modal is controlled by our custom trigger component.
        </div>
        <div className='modal-footer'>
          <Button onClick={this.handleToggle}>Close</Button>
        </div>
      </Modal>
    );
  }
});

React.render(<CustomModalTrigger />, mountNode);

更新(2015年8月4日)

在最新版本的React-
Bootstrap中,是否显示模态由show传递给模态的道具控制。将OverlayMixin不再需要控制模式状态。仍然通过来控制模态的状态setState,在此示例中,通过this.setState({ showModal: true })。以下内容基于React-Bootstrap网站上的示例:

const ControlledModalExample = React.createClass({

  getInitialState(){
    return { showModal: false };
  },

  close(){
    this.setState({ showModal: false });
  },

  open(){
    this.setState({ showModal: true });
  },

  render() {
    return (
      <div>
        <Button onClick={this.open}>
          Launch modal
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div>Modal content here </div>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
});


 类似资料:
  • 问题内容: 如果我去这里 然后单击“启动演示模态”,即可完成预期的操作。我将模式用作注册过程的一部分,并且涉及服务器端验证。如果有问题,我想将用户重定向到显示我的验证消息的相同模式。目前,除了用户的物理点击之外,我无法弄清楚如何显示模式。如何以编程方式启动模型? 问题答案: 为了手动显示模式弹出窗口,您必须执行此操作 以前,您需要使用对其进行初始化,以便在您手动执行之前不会显示它。 模态容器的ID

  • 我通过媒体播放器播放文件,我想提供扬声器开/关、通过耳机播放、蓝牙等选项。我尝试了以下适用于android 2.2的代码,但我想要一些也可以同时适用于2.2和4.0的代码。你能帮我以编程方式打开/关闭扬声器并通过耳机播放吗? P、 S:我已在清单中授予此权限:

  • 问题内容: JFrame与用户按下X关闭按钮或按在Windows上)相同,获得关闭的正确方法是什么? 我通过以下方式设置了我想要的默认关闭操作: 它完全符合我想要的上述控件的功能。这个问题不是关于这个的。 我真正想做的是使GUI的行为与按下X关闭按钮的行为相同。 假设我要扩展,然后通过来添加我的适配器的实例作为侦听器。我想看到的调用相同的序列通过,以及作为将与出现X关闭按钮。可以这么说,撕开窗户与

  • 我的主类扩展了JPanel,我在这个面板上创建了一个表和一个按钮。现在我想在用户按下它时关闭这个面板。在互联网上关闭面板的例子是关于JFrame.JPanel有解决方案吗?

  • 我正在使用netty 4.0。24.4决赛。 我需要以编程方式启动/停止网络服务器。 在启动服务器时,线程在 请提供一些如何正确操作的提示。下面是由主类调用的EchoServer。谢谢 更新:我用以下方式更改了EchoServer类。其想法是在新线程中启动服务器,并保留到EventLoopGroup的链接。这条路对吗?

  • 问题内容: 我想制作一个锁屏应用程序。当手机处于锁定模式时,它将在插入USB时关闭手机,以防止其他用户访问手机数据。有谁知道如何以编程方式关闭Android设备,以使其他人在设备处于锁定模式时无法访问数据? 这是在锁定屏幕活动上锁定主屏幕按钮的代码: 问题答案: 使用公开的Android SDK是不可能的。