如何以编程方式打开/关闭反应引导模式? [英] How to open/close react-bootstrap modal programmatically?

问题描述

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

<块引用>

$(element).modal('show')

怎么做?

解决方案

您正在寻找的是自定义模态触发器，它使用 OverlayMixin 并允许您自己管理模态的状态.您可以使用 this.setState({isModalOpen: true}) 控制是否显示模态，以实现您在以下示例中的帖子中要求的内容.以下代码来自 react-bootstrap 网站 (http://react-bootstrap.github.io/components.html#modals):

const CustomModalTrigger = React.createClass({混合:[OverlayMixin]，getInitialState() {返回 {isModalOpen: 假};},手柄切换(){this.setState({isModalOpen: !this.state.isModalOpen});},使成为() {返回 (<Button onClick={this.handleToggle} bsStyle='primary'>Launch</Button>);},//当这个组件被 `OverlayMixin` 调用时//被挂载或更新，并且返回值被附加到主体.渲染覆盖(){如果(！this.state.isModalOpen){返回 <span/>;}返回 (<Modal bsStyle='primary' title='Modal Heading' onRequestHide={this.handleToggle}>
此模式由我们的自定义触发器组件控制.
<Button onClick={this.handleToggle}>关闭</Button>
</模态>);}});React.render(, mountNode);

更新(2015 年 8 月 4 日)

在最新版本的 React-Bootstrap 中，是否显示模态是由传递给模态的 show 属性控制的.OverlayMixin 不再需要控制模态状态.控制模态的状态仍然通过setState 完成，在这个例子中通过this.setState({ showModal: true }).以下内容基于 React-Bootstrap 网站上的示例:

const ControlledModalExample = React.createClass({getInitialState(){返回 { showModal: false };},关闭(){this.setState({ showModal: false });},打开(){this.setState({ showModal: true });},使成为() {返回 (<div><Button onClick={this.open}>启动模式</按钮><Modal show={this.state.showModal} onHide={this.close}><Modal.Header closeButton><Modal.Title>模态标题</Modal.Title></Modal.Header><模态体><div>这里的模态内容</div></Modal.Body><模态.页脚><Button onClick={this.close}>Close</Button></Modal.Footer></模态>

);}});

I need to open/close modal like

$(element).modal('show')

How to do that?

解决方案

What you are looking for is the custom modal trigger, which uses the OverlayMixin and allows you to manage the modal's state yourself. You can control whether the modal is shown using this.setState({isModalOpen: true}) to achieve the equivalent of what you asked for in your post in the example below. The following code is from the react-bootstrap website (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);

UPDATE (Aug 4, 2015)

In the newest version of React-Bootstrap, whether a modal is shown or not is controlled by a show prop which is passed to the modal. The OverlayMixin is no longer needed to control the modal state. Controlling the state of the modal is still done via setState, in this example via this.setState({ showModal: true }). The following is based off the example on the React-Bootstrap website:

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>
    );
  }
});

这篇关于如何以编程方式打开/关闭反应引导模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！