如何通过编程方式打开/关闭React-Bootstrap模态框？

Question

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

$(element).modal('show')

如何实现？

- Igor Babkin

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属性来控制是否显示。不再需要使用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>
    );
  }
});

- Mark

---

如果您需要使用 refs 访问模态框中的表单元素，则此方法无效。 - vaughan

遇到了这个问题 - https://dev59.com/ul0a5IYBdhLWcg3wCE3P "setState() 方法不会立即改变 this.state，而是创建一个待处理的状态转换。在调用此方法后访问 this.state 可能会返回现有值。没有同步操作的保证，调用 setState 的调用可能会被批处理以获得性能提升。" 我调用了 setState，但它没有更新。 - Steve

Steve，你的问题具体是什么？也许你可以发布一个带有代码和你遇到的问题的问题。 - Mark

Answer 2

您的弹出窗将有一个 show 属性和一个 onHide 属性来确定它何时显示。例如：

您的模态框将具有 "show" 属性和 "onHide" 属性，以确定其何时显示。例如：

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

onHide函数仅修改showModal状态属性。您的模态框显示/隐藏基于父级状态:

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

如果您想从模态窗口内部关闭模态窗口，您可以通过 props 触发在父组件中定义的 onHide 函数。例如，在模态框内部某个位置上有一个按钮，单击该按钮可以关闭它：

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

这里有一个 Fiddle 模拟了这个工作流程。

- Jan Klimo

---

当你给我点踩的时候，我很希望能听到你的理由。 - Jan Klimo

这不是一个Bootstrap模态框。 - Nicola Pedretti

https://jsfiddle.net/16j1se1q/1/ 这是一个模态框的样子。你的例子展示了如何在React中使一个div出现和消失，这很有用，但不适用于这个问题。 - Nicola Pedretti

Answer 3

通过状态编程实现在React-Bootstrap模态框的动态打开和关闭：

在此处使用了ES6语法的类组件语法。

import React, { Component, PropTypes } from 'react';
import { Modal, Button } from 'react-bootstrap';
import './GenericModal.scss';

class GenericModal extends Component {
  constructor(props, context) {
  super(props, context);

  this.state = {
    showModal: false
  };

  this.open = this.open.bind(this);
  this.close = this.close.bind(this);
}


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

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

render() {
  return(
    <div>
      <div>I am a Bootstrap Modal</div>
      <Button onClick={this.open}>Show Modal</Button>
      <div>
        <Modal className="modal-container" 
          show={this.state.showModal} 
          onHide={this.close}
          animation={true} 
          bsSize="small">

          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            One of fine body.........
          </Modal.Body>

          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
            <Button bsStyle="primary">Save changes</Button>
          </Modal.Footer>         
        </Modal> 
      </div>
    </div>
  );
 }
}

export default GenericModal;

- Md. Mahmudur Rahman

Answer 4

你可以使用React hooks来完成这个任务。(已包含在React 16.8中)。

import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";

const ComponentWithModal = props => {
  const [isModalOpen, setModalStatus] = useState(false);

  return (
    <div>
      <div>I am a Bootstrap Modal</div>
      <Button onClick={() => setModalStatus(true)}>Show Modal</Button>
      <div>
        <Modal
          className="modal-container"
          show={isModalOpen}
          onHide={() => setModalStatus(false)}
        >
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>Modal content here</Modal.Body>

          <Modal.Footer>
            <Button onClick={() => setModalStatus(false)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    </div>
  );
};

export default ComponentWithModal;

- Zakher Masri