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

Question

我需要打开/关闭模态

$(元素).modal( '秀')

怎么做？

Answer 1

您正在寻找的是自定义模态触发器,它使用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传递给模态的prop 控制.将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>
    );
  }
});

Answer 2

你的模态将有一个show道具和一个onHide道具,以确定它何时显示.例如:

<Modal show={this.state.showModal} onHide={this.close}>

该onHide函数只是改变了showModal属性.根据父母的状态显示/隐藏您的模态:

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

如果您想从模态本身中关闭模态,则可以触发onHide父对象上定义的函数props.例如,这是一个关闭它的模态内部的按钮:

<button type="button" className="close" onClick={this.props.onHide}>
  <span>&times;</span>
</button>

这是模拟这个工作流程的小提琴.